1.画圆/扇形
window.onload=function(){
var canvas=document.getElementById(‘canvas‘);
var ctx=canvas.getContext(‘2d‘);
ctx.moveTo(100,100);
ctx.arc(100,100,100,0,90*Math.PI/180,false);//属性参数(圆心X坐标,圆心Y坐标,半径,弧长=角度*Math.PI/180,旋转方向:tru逆时针/false顺时针)
ctx.closePath();
ctx.stroke();
}
效果如下:
2.[ 案例 ] 时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>钟表</title>
<script>
window.onload=function(){
var canvas=document.getElementById(‘canvas‘);
var ctx=canvas.getContext(‘2d‘);
ctx.fillStyle=‘white‘;
//画刻度
function drawCircle(x,y,r,deg1,deg2,width){
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r,deg1*Math.PI/180,deg2*Math.PI/180,false);
ctx.closePath();
ctx.lineWidth=width;
ctx.fill();
}
//画刻度
function drawScale(x,y,r,num,deg,width){
ctx.beginPath();
for(var i=0;i<num;i++){
ctx.moveTo(x,y);
ctx.arc(x,y,r,i*deg*Math.PI/180,(i+1)*deg*Math.PI/180,false);
}
ctx.closePath();
ctx.lineWidth=width;
ctx.stroke();
}
//画钟
function drawClock(){
var x=250;
var y=300;
var r=100;//时钟半径
var date=new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
var hourValue=-90+hour*30+minute/12;//时针转动弧长度数(设12点为0度)
var minuteValue=-90+minute*6;//分针转动弧长度数(设12点为0度)
var secondValue=-90+second*6;//秒针转动弧长度数(设12点为0度)
//分针格子
drawScale(x,y,r,60,6,1);
//圆盘
drawCircle(x,y,95,0,360,1);
//时针格子
drawScale(x,y,r,12,30,2);
//盖圆盘
drawCircle(x,y,90,0,360,1);
//画时针
drawCircle(x,y,r*10/20,hourValue,hourValue,2);
ctx.stroke();
//画分针
drawCircle(x,y,r*15/20,minuteValue,minuteValue,1);
ctx.stroke();
// //画秒针
drawCircle(x,y,r*19/20,secondValue,secondValue,0.5);
ctx.stroke();
}
setInterval(drawClock,80);
}
</script>
<style>
body{
background: #000;
}
*{
margin:0;
padding: 0;
margin:0 auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="600" style="background:#fff;">
<span>不支持canvas标签</span>
</canvas>
</body>
</html>
效果显示: https://happyn6j.github.io/Clock.com/
3.绘制其他曲线:
window.onload=function(){
var canvas=document.getElementById(‘canvas‘);
var ctx=canvas.getContext(‘2d‘);
ctx.moveTo(100,100);
ctx.arcTo(100,200,200,200,50);//曲线起始点坐标,曲线结束点坐标,切割曲线半径
ctx.stroke();
}
效果显示:
贝塞尔曲线(2种):
window.onload=function(){
var canvas=document.getElementById(‘canvas‘);
var ctx=canvas.getContext(‘2d‘);
ctx.moveTo(100,100);//起始点坐标
ctx.quadraticCurveTo(100,200,200,200);//控制点坐标,结束点坐标 /*ctx.bezierCurveTo(100,200,200,200,200,100);//第一个控制点坐标,第二个控制点坐标,结束点坐标*/
ctx.stroke();}
4.变换
window.onload=function(){
var canvas=document.getElementById(‘canvas‘);
var ctx=canvas.getContext(‘2d‘);
ctx.translate(100,100);//偏移,从起始点为基准点,移动到当前坐标
ctx.rotate(45*Math.PI/180);//旋转(参数为弧度)
ctx.scale(2,2);//等比缩放
ctx.fillRect(0,0,100,100);
}
5.[ 案列 ] 转动放大缩小的盒子
window.onload=function(){
var canvas=document.getElementById(‘canvas‘);
var ctx=canvas.getContext(‘2d‘);
var num=0;
var temp=1;
setInterval(function(){
ctx.save();
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(200,200);
if(num>50){
temp=-1;
}else if(num<0){
temp=1;
}
num+=temp;
ctx.scale(num*1/50,num*1/50);
ctx.rotate(num*Math.PI/180);
ctx.translate(-50,-50);
ctx.fillRect(0,0,100,100);
ctx.restore();
},30);}
时间： 2024-12-10 08:01:17