HTML5 canvas的 图像绘制，转换，其他 方法
img图像下载完毕事件onload
img.onload =function() { }
图像绘制方法
HTML5 canvas drawImage() 方法
图像绘制
<!DOCTYPE HTML>
<html>
<body>
<img id="pic" class="grayscale" src="myPicture.png" alt="Description of my picture" />
<canvas id="myCanvas" width="800" height="200" style="border:1px solid"></canvas>
</body>
</html>
<script type="text/javascript">
document.getElementById("pic").onload = function () {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("pic");
ctx.drawImage(img, 10, 10);
};
</script>
代码运行结果：
ctx.drawImage()绘制图像，有三种使用方式。
-
3参数 : 图像资源、绘制的x轴坐标、绘制的y轴坐标
-
5参数 ：图像资源、绘制的x轴坐标、绘制的y轴坐标、绘制的宽、绘制的高
-
9参数 ：图像资源、裁剪的x轴坐标，裁剪的y轴坐标，裁剪的宽，裁剪的高，绘制的x轴坐标、绘制的y轴坐标、绘制的宽、绘制的高
转换方法
HTML5 canvas translate() 方法
translate( x轴平移的量，y轴平移的量 )；
// 平移坐标轴，不会影响已经绘制好的图形，平移会累加。
在位置 (10,10) 处绘制一个矩形，将新的 (0,0) 位置设置为 (70,70)。再次绘制新的矩形（请注意现在矩形从位置 (80,80) 开始绘制）：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
HTML5 canvas rotate() 方法
rotate( 弧度 )；
// 旋转坐标轴，不会影响已经绘制好的图形，旋转会累加。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);
HTML5 canvas scale() 方法
scale( x轴缩放的倍数，y轴缩放的倍数 )；
// 缩放坐标轴，不会影响已经绘制好的图形，缩放会累加。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
参考链接：http://www.w3school.com.cn/tags/html_ref_canvas.asp
其他方法
save()
用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
把当前状态copy一份进行保存，多次调用可以保存多份状态。
restore()
用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。
回滚最近一次的状态保存。
扫一扫
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
