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

来源:赵克立博客 分类: HTML5 标签:canvasHTML5发布时间:2016-11-30 15:07:10最后更新:2016-12-19 10:42:43浏览:4048
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。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 紧急求助须知
Win32/PHP/JS/Android/Python