简单教程
提交运行
代码编辑器:
<p>要使用的图片:</p> <img id="scream" src="/static/i/img3.jpg" width="400"> <p>画布:</p> <canvas id="canvas-2" width="300" height="150" style="border:1px solid #d3d3d3;background:#ffffff;">你的浏览器不支持 canvas 元素</canvas> <script> var img2 = document.createElement("img"); img2.src="/static/i/img3.jpg"; img2.onload= function() { var c=document.getElementById("canvas-2"); 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,150,180); } } </script>
运行结果: