本教程将展示如何将外部图像导入画布,然后如何使用以下方法在该图像上绘制-
产品编号。 | 方法和描述 |
---|---|
1 | beginPath() 此方法重置当前路径。 |
2 | moveTo(x,y) 此方法使用给定的点创建一个新的子路径。 |
3 | closePath() 此方法将当前子路径标签为已关闭,并以与新关闭的子路径的起点和终点相同的点开始新的子路径。 |
4 | fill() 此方法使用当前的填充样式填充子路径。 |
5 | stroke() 此方法以当前笔触样式描边子路径。 |
6 | drawImage(image,dx,dy) 此方法将给定的图像绘制到画布上。这里的 image 是对图像或画布 Object 的引用。 x和y在目标画布上应放置无涯教程图像的坐标。 |
以下是一个简单的示例,该示例利用上述方法导入图像。
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function drawShape() { //使用 DOM 获取画布元素 var canvas=document.getElementById('mycanvas'); //连接数据库凭据 if (canvas.getContext) { //确保不支持画布时不执行 var ctx=canvas.getContext('2d'); //绘制形状 var img=new Image(); img.src='/images/backdrop.jpg'; img.onload=function() { ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body onload="drawShape();"> <canvas id="mycanvas"></canvas> </body> </html>
它将产生以下输出-
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)