原图：

效果图：

1.可以在 canvas 上直接绘制图片

<canvas id="cvs_10" width="300" height="150"> 你的浏览器不支持 canvas，请升级你的浏览器。</canvas><button type="button" onclick="draw_image()">点击</button><script type="text/javascript">function draw_image(){//var canvas = document.getElementById("cvs_10")//检测支持性if(!canvas.getContext("2d")) return;//获得 2d 上下文对象var ctx = canvas.getContext("2d");var img = new Image();//创建img元素img.onload = function(){// 参数 1：要绘制的 img   参数 2、3：绘制的 img 在 canvas 中的坐标 参数4,5是width，heightctx.drawImage(img,10,10,300,150);ctx.setLineDash([5,5])ctx.strokeRect(10,10,300,150)// ctx.fillRect(10,10,100,100)}img.src = "./img/11.jpg";//设置图片源地址}或者：<script type="text/javascript">var img = new Image();//创建img元素img.onload = function(){draw_image()}img.src = "./img/11.jpg";//设置图片源地址function draw_image(){//var canvas = document.getElementById("cvs_10")//检测支持性if(!canvas.getContext("2d")) return;//获得 2d 上下文对象var  ctx = canvas.getContext("2d");// 参数 1：要绘制的 img   参数 2、3：绘制的 img 在 canvas 中的坐标 参数4,5是width，heightctx.drawImage(img,10,10,300,150);ctx.setLineDash([5,5])ctx.strokeRect(10,10,300,150)// ctx.fillRect(10,10,100,100)}</script>

2.绘制 img 标签元素中的图片

<p>原图</p><div><img src="./img/12.jpg" width="600" height="200"  id="imgPt" ></div><p>画布</p><canvas id="cvs_11" width="600" height="300">你的浏览器不支持 canvas，请升级你的浏览器</canvas><script type="text/javascript">function draw_image(){//var canvas = document.getElementById("cvs_11")//检测支持性if(!canvas.getContext("2d")) return;//获得 2d 上下文对象ctx = canvas.getContext("2d");//var img = document.getElementById("imgPt")var img = document.querySelector("img");ctx.drawImage(img, 0, 0);}document.querySelector("img").onclick = function (){draw_image();}</script>

注意：考虑到图片是从网络加载，如果 drawImage 的时候图片还没有完全加载完成，则什么都不做，个别浏览器会抛异常。所以我们应该保证在 img 绘制完成之后再 drawImage。