Canvas引用图像【每日一段代码13】
2012-02-08 21:55
351 查看
<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) 处。红色折线部分使用前面讲的方法绘制的。】
<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) 处。红色折线部分使用前面讲的方法绘制的。】
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Canvas引用缩放图像【每日一段代码14】
- Canvas运用样式与颜色fillStyle【每日一段代码15】
- Html5 Canvas绘制锯齿形【每日一段代码29】
- HTML5 Canvas 矩形【每日一段代码5】
- Canvas lineWidth 属性 【每日一段代码18】
- HTML5 Canvas 文本【每日一段代码32】
- Canvas绘制矩形的三个函数【每日一段代码7】
- JavaScript 图像映射 【每日一段代码71】
- Canvas绘制路径：贝塞尔曲线【每日一段代码12】
- canvas 线性渐变填充【每日一段代码62】
- HTML5 Canvas 画圆【每日一段代码4】
- Canvas绘制重叠矩形【每日一段代码6】
- Canvas lineJoin 属性【每日一段代码20】
- Canvas createRadialGradient 线性渐变【每日一段代码22】
- Canvas运用样式与颜色strokeStyle【每日一段代码16】
- Canvas rgba() 透明度属性【每日一段代码17】
- HTML5 Canvas 绘制树 【每日一段代码38】
- Canvas绘制弧形【每日一段代码10】
- Canvas createLinearGradient 线性渐变【每日一段代码21】
- Canvas 状态的保存和恢复实例【每日一段代码25】