canvas旋转画上去的图形,图片

来源:赵克立 分类: HTML5 标签:canvasHTML5发布时间:2016-11-30 15:07:10浏览:302
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2016-12-19 10:42:43

blob.png

<canvas id="huabu"></canvas>
<script>
var canvas=document.getElementById('huabu');
canvas.width=400;
canvas.height=400;
var cxt=canvas.getContext('2d');
cxt.fillStyle='#000';
cxt.fillRect(0,0,canvas.width,canvas.height);
//保存画布状态
cxt.save();
//重新定定原点
cxt.translate(75,75);
//旋转画布45度
cxt.rotate(45*Math.PI/180);
//画矩形
cxt.fillStyle='#00ff00';
cxt.fillRect(-25,-25,50,50); 
//恢复画布原来的状态
cxt.restore();
</script>

旋转图片的原理也类似,先转画布再画图,画好后再恢复画布状态


微信号:kelicom QQ交流群:215861553
点击更换验证码
留言