<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<style>
canvas{
background:#eee;
}
</style>
<script>
window.οnlοad=function(){
var canvas = document.getElementById("canvas");
var cobj = canvas.getContext("2d");
/*
cobj.strokeRect(0,0,100,100);
cobj.save();
cobj.scale(0.5,0.5);
cobj.fillRect(50,50,100,100);
cobj.restore();
cobj.arc(200,200,100,0,2*Math.PI);
cobj.fill();
*/
//位移
/*
var num=0;
setInterval(function(){
cobj.clearRect(0,0,600,600);
num++;
cobj.save();
cobj.translate(num,0);
cobj.fillRect(0,0,100,100);
cobj.restore();
},100);
*/
//清除画布的问题
/*
cobj.translate(100,100);
cobj.fillRect(-50,-50,100,100);
cobj.clearRect(-50,-50,600,600);
*/
//旋转
/*
var num=0;
setInterval(function(){
num+=2;
cobj.clearRect(0,0,600,600);
cobj.save();
cobj.translate(100,100);
cobj.rotate(num*Math.PI/180);
cobj.strokeRect(50,50,100,100);
cobj.restore();
},100);
*/
//transform变换矩阵
cobj.translate(100,100);
//cobj.transform(1,10*Math.PI/180,10*Math.PI/180,1,100,100);//会累加之前的移动
cobj.setTransform(1,10*Math.PI/180,10*Math.PI/180,1,100,100);//会忽略掉以前的移动
cobj.strokeRect(0,0,100,100);
}
</script>
</head>
<body>
<canvas width="600" height="600" id="canvas">
请您升级浏览器
</canvas>
</body>
</html>
HTML5(七)canvas矩阵转换
最新推荐文章于 2024-03-15 16:17:32 发布