1.canvas实现旋转缩放的方块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{background: #000;}
#ca{background:#999}
</style>
<script>
window.onload=function(){
var oc=document.getElementById("ca");
var pa=oc.getContext('2d');
var num=0;
var numb=0;
var value=1;
pa.translate(100,100);
setInterval(function(){
num++;
pa.save();
pa.clearRect(-100,-100,oc.width,oc.height);
if(numb==100){
value=-1;
}else if(numb==0){
value=1;
}
numb+=value;
pa.scale(numb*1/50,numb*1/50);
pa.rotate(num*Math.PI/180);
pa.translate(-50,-50);
pa.fillRect(0,0,100,100);
pa.restore();
},30);
};
</script>
</head>
<body>
<canvas id="ca" width="400px" height="400px"></canvas>
</body>
</html>
效果：
2.canvas合成图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body{
width: 100%;
}
</style>
</head>
<body>
<button onclick="hec()"> 合成图片</button>
<script>
function hec(){
dataurl=ca.toDataURL("image/png");
console.log(dataurl)
var bigImg = document.createElement("img");
bigImg.src=dataurl;
bigImg.style.width=10+"%";
bigImg.style.height=20+"%";
document.body.appendChild(bigImg);
//document.getElementById("你的div").appendChild(bigImg);
//$("你的div").html(bigImg);
}
var dataurl;
var img1;
var img2;
//var ca=document.getElementById('mycanvas');
var ca=document.createElement("canvas");
var ctx=ca.getContext('2d');
function init(){
img1=new Image;
img2=new Image;
img1.setAttribute("crossorigin","Aninomous");
img2.setAttribute("crossorigin","Anonymous");
img1.src="http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLFPJR06vhs1iccMd3hFzJ3GXAFm4VljTErIq6ejH3ZicIvfz9DqKxecXkKlUsZtDYYXOo9h0icQWZDw/0"
img2.src="https://qnlite.gtimg.com/qqnewslite/20190924/avatar/head1.png"
//var img1=document.getElementById('img1');
//var img2=document.getElementById('img2');
ca.width=300;
ca.height=300;
img1.onload=function(){
ctx.drawImage(img1,0,0,300,300);
ctx.drawImage(img2,0,0,300,300);
}
}
init();
</script>
</body>
</html>
3.canvas做一个钟表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{background: #000;}
#ca{background:#999}
</style>
<script>
window.onload=function(){
var oc=document.getElementById("ca");
var pa=oc.getContext('2d');
function toDraw(){
x=200;
y=200;
r=150;
pa.clearRect(0,0,oc.width,oc.height);
var pDate=new Date();
var pHours=pDate.getHours();
var pMin=pDate.getMinutes();
var pSec=pDate.getSeconds();
var pHoursValue=(-90+pHours*30+pMin/2)*Math.PI/180;
var pMinValue=(-90+pMin*6)*Math.PI/180;
var pSecValue=(-90+pSec*6)*Math.PI/180;
/*分刻度*/
pa.beginPath();
for(i=0;i<60;i++){
pa.moveTo(x,y);
pa.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
pa.closePath();
pa.stroke();
pa.fillStyle='white';
/*外圆盘，遮住中间的分刻度*/
pa.beginPath();
pa.moveTo(x,y);
pa.arc(x,y,r*19/20,0,360*Math.PI/180,false);
pa.closePath();
pa.fill();
/*时刻度*/
pa.lineWidth=3;
pa.beginPath();
for(i=0;i<12;i++){
pa.moveTo(x,y);
pa.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
pa.closePath();
pa.stroke();
/*内圆盘*/
pa.beginPath();
pa.moveTo(x,y);
pa.arc(x,y,r*18/20,0,360*Math.PI/180,false);
pa.closePath();
pa.fill();
/*时针*/
pa.lineWidth=5;
pa.beginPath();
pa.moveTo(x,y);
pa.arc(x,y,r*10/20,pHoursValue,pHoursValue,false)
pa.closePath();
pa.stroke();
/*分针*/
pa.lineWidth=3;
pa.beginPath();
pa.moveTo(x,y);
pa.arc(x,y,r*14/20,pMinValue,pMinValue,false)
pa.closePath();
pa.stroke();
/*秒针*/
pa.lineWidth=1;
pa.beginPath();
pa.moveTo(x,y);
pa.arc(x,y,r*19/20,pSecValue,pSecValue,false)
pa.closePath();
pa.stroke();
}
setInterval(toDraw,1000);
toDraw();
};
</script>
</head>
<body>
<canvas id="ca" width="400px" height="400px"></canvas>
</body>
</html>
效果如下：
--2021
