javascript - How to set image to be <canvas> background -
i'm working on project have table , canvas field below table.
i need set 1 of pictures background , in case tshirt.png.
until have done following. have 2 files (index.html & jquery.js)
index
<html> <head> <script src="js/jquery.js"></script> </head> <table border="1"> <tr> <td>#</td> <td>filename</td> <td>x</td> <td>y</td> <td>z</td> </tr> <tr> <td>1</td> <td><img src="images/sheep.png" width="40px" height="40px"></img></td> <td><input type="text" value="" name="x"></td> <td><input type="text" value="" name="y"></td> <td><input type="text" value="" name="z"></td> </tr> <tr> <td>2</td> <td><img src="images/tshirt.png" width="40px" height="40px"></td> <td><input type="text" value=""></td> <td><input type="text" value=""></td> <td><input type="text" value=""></td> </tr> <tr> <td>3</td> <td>item.png</td> <td><input type="text" value=""></td> <td><input type="text" value=""></td> <td><input type="text" value=""></td> </tr> </table> <section id="main"> <canvas id="canvas" width="1024" height="768" style="border:1px solid red;"> </canvas> </section> </html> jquery.js
function dofirst(){ var x = document.getelementbyid('canvas'); canvas = x.getcontext('2d'); var pic = new image(); pic.src = "images/sheep.png"; pic.addeventlistener("load", function() { canvas.drawimage(pic,0,0,100,200)}, false); var background = new image(); background.src = "images/tshirt.png"; background.addeventlistener("load",function(){ canvas.drawimage(background,0,250,200,300)}, false); } window.addeventlistener("load", dofirst, false); any help welcome
the canvas takes different mindset , approach remember take step , think of more 'simple' approach, help on engineering science code.
just utilize css define background
background: url("images/tshirt.png"); here how can set in javascript via jquery previous post
javascript jquery html5 canvas
No comments:
Post a Comment