<DOCTYPE HTML>
<html>
<head>
<title>Canvas drawImage example</title>
<script type="text/javascript">
function draw() {
var cxt = document.getElementById("myCanvas").getContext("2d");
var img = new Image();
img.src = "C:/Users/Administrator/Desktop/666.png";//图片路径
img.onload = function(){
cxt.drawImage(img,0,0);
cxt.strokeStyle="#FF0000";
cxt.beginPath();
cxt.moveTo(30,96);
cxt.lineTo(70,66);
cxt.lineTo(103,76);
cxt.lineTo(170,15);
cxt.stroke();
}
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas""></canvas>
</body>
</html>
显示效果如下：
【用到的函数 drawImage(image, x, y) 其中，括号内 image 是 image 图片或者 canvas 对象。x，y 是其在目标 canvas 中的坐标。本实例中，调用一个外部图像作为一线性图的背景。用背景图就不需要绘制负责的背景，省下不少代码。这里只用到一个 image 对象，于是就在它的 onload 事件响应函数中触发绘制动作。drawImage 方法将背景图放置在 canvas 的左上角 (0,0) 处。红色折线部分使用前面讲的方法绘制的。】