HTML5 Canvas 小例子 伸缩旋转方块

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: black;
}
#canvas {
background: white;
margin: 100px 0 0 300px;
}
#canvas>span {
color: white;
font-size: 14px;
}
</style>
<body>
<canvas id="canvas" width="600" height="500">
<span>您的浏览器不支持</span>
</canvas>
</body>
</html>
<script type="text/javascript">
/*获取绘制环境*/
var oc = $('#canvas')[0];
var canvas = oc.getContext('2d');
/*偏移*/
canvas.translate(200, 200);
var num = 0, multiple = 1, value = 1;
setInterval(function(){
num++;
if(multiple == 100 || multiple == 0){
value *= -1;
}
multiple += value;
/*局面canvas的起始点*/
canvas.save();
/*图形倍数(横向放大倍数,纵向放大倍数)*/
canvas.scale(multiple*1/50, multiple*1/50);
/*清理屏幕由于圆点被偏移,画布的坐标也跟着发生偏移*/
canvas.clearRect(-150, -150, oc.width, oc.height);
/*旋转弧度*/
canvas.rotate(num*Math.PI/180);
/*偏移旋转中心*/
canvas.translate(-50, -50);
/*填充方块*/
canvas.fillRect(0, 0, 100, 100);
/*局面canvas的结束点*/
canvas.restore();
}, 30);
</script>

文章来源地址https://www.yii666.com/article/754338.html文章地址https://www.yii666.com/article/754338.html网址:yii666.com<网址:yii666.com文章来源地址:https://www.yii666.com/article/754338.html

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png