简单教程
提交运行
代码编辑器:
<p>要使用的图片:</p> <img id="scream" src="/static/i/img3.jpg" width="500"> <p>画布:</p> <canvas id="canvas-1" width="300" height="150" style="border:1px solid #d3d3d3;background:#ffffff;">你的浏览器不支持 canvas 元素</canvas> <script> var img1 = document.createElement("img"); img1.src="/static/i/img3.jpg"; img1.onload= function() { var c=document.getElementById("canvas-1"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); var img= this ctx.drawImage(img,10,10); } } </script>
运行结果: