1、canvas-畫布圖片旋轉
樣式圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./jquery.js"></script>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<canvas id="c3" width="500" height="400"></canvas>
</body>
<script>
var c3=document.getElementById("c3")
var ctx=c3.getContext("2d")
// 1:創建圖片對象
var p3=new Image();
// 2.下載指定圖片
p3.src="./1.jpg";
// 3.綁定下載成功事件
p3.onload=function(){
// 3.1創建變量deeg1 deg2
var deg1=0;
var deg2=0;
// 3.2創建定時器
setInterval(()=>{
ctx.clearRect(0,0,5000,4000)
// 3.3保存畫筆狀態save
ctx.save();
// 3.4平移原點
ctx.translate(100,200);
// 3.5累加deg1角度
deg1+=15;
// 3.6旋轉
ctx.rotate(deg1*Math.PI/180);
// 3.7繪圖
ctx.drawImage(p3,0-100,0-50);
// 3.8恢復
ctx.restore();
// 第二家飛機
// 1.保存狀態
ctx.save();
ctx.translate(350,200);
deg2+=60;
ctx.rotate(deg2*Math.PI/180);
ctx.drawImage(p3,0-100,0-50);
ctx.restore();
},1)
}
</script>
</html>
2、canvas-圖片跟隨鼠標移動
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./jquery.js"></script>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<canvas id="c3" width="1500" height="1000"></canvas>
</body>
<script>
var c3=document.getElementById("c3");
var ctx=c3.getContext("2d")
// 1.創建圖片對象
var p3=new Image();
// 2.下載圖片
p3.src="./1.jpg"
// 3.綁定下載成功事件onload
p3.onload=function(){
//圖片寬，高
var w=p3.width;
var h=p3.height;
// 4.爲畫布綁定鼠標移動事件
c3.onmousemove=function(event){
// 清空畫布
ctx.clearRect(0,0,500,400);
// 5.獲取鼠標中心位置
var x=event.offsetX-(w/2);
// 5.1判斷x,y是否超出邊框
if(x>500-w){
x=500-w;
}
var y=event.offsetY-(h/2);
if(y>400-h){
y=400-h;
}
// 6.賦值圖片x,y
ctx.drawImage(p3,x,y)
}
}
</script>
</html>
3、canvas-矩形統計圖表
樣式圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./jquery.js"></script>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<canvas id="c3" width="800" height="600"></canvas>
</body>
<script>
var c3=document.getElementById("c3");
var ctx=c3.getContext("2d");
var rows=[{name:"東口",val:2800},
{name:"西口",val:2700},
{name:"南口",val:3100},
{name:"地鐵口",val:3500}
];
//1.創建循環遍歷數組中每個元素
for(var i=0;i<rows.length;i++){
// 2.創建變量x,y w h
// 3.並且分別計算
var w=50;
var h=rows[i].val/10;
var x=i*100+50;
var y=600-h;
// console.log(rows[i].val)
// 3.1指定實心樣式
ctx.fillStyle=rc();
// 3.2指定矩形透明度
ctx.globalAlpha=0.6;
function rc(){
var r=Math.floor(Math.random()*255);
var g=Math.floor(Math.random()*255);
var b=Math.floor(Math.random()*255);
ctx.fillStyle=`rgb(${r},${g},${b})`;
}
// 4.創建實心對應矩形
ctx.fillRect(x,y,w,h);
// 5.繪製分公司名稱
// 6.設置文本顏色，黑色、
ctx.fillStyle="#000";
// 7.文本大小
ctx.font="25px SimHei";
// 8.分公司名稱
var n=rows[i].name;
ctx.fillText(n,x,600-5);
// 9，繪製銷售額
var v=rows[i].val;
ctx.fillText(v,x,600-30-h);
}
</script>
</html>
4、canvas-繪製笑臉，張嘴閉嘴
樣式圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./jquery.js"></script>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<canvas id="c3" width="500" height="400"></canvas>
</body>
<script>
var c3=document.getElementById("c3");
var ctx=c3.getContext("2d");
// 閉嘴笑臉
function closeM(){
ctx.clearRect(0,0,500,400)
// 1.繪製最外層輪廓圓臉
ctx.beginPath();
ctx.strokeStyle="#f35"
ctx.arc(250,200,100,0,2*Math.PI);
// 2.繪製閉嘴
ctx.lineTo(250,200)
ctx.stroke();
// 3.繪製實心眼球
ctx.beginPath();
ctx.fillStyle="#a32";
ctx.arc(270,155,20,0,2*Math.PI);
ctx.fill();
// 4.繪製實心眼神
ctx.beginPath();
ctx.fillStyle="#fff";
ctx.arc(278,160,10,0,2*Math.PI) ;
ctx.fill()
// 4.1眼珠
ctx.beginPath();
ctx.fillStyle="#000";
ctx.arc(283,163,5,0,2*Math.PI) ;
ctx.fill()
}
// 張嘴笑臉
function openM(){
ctx.clearRect(0,0,500,400);
// 1.繪製最外層輪廓圓臉
ctx.beginPath();
ctx.strokeStyle="#f35"
ctx.arc(250,200,100,30*Math.PI/180,340*Math.PI/180);
// 2.繪製閉嘴
ctx.lineTo(250,200);
// 閉合路徑 結束點到開始點
ctx.closePath();
ctx.stroke();
// 3.繪製實心眼球
ctx.beginPath();
ctx.fillStyle="#a32";
ctx.arc(270,155,20,0,2*Math.PI);
ctx.fill();
// 4.繪製實心眼神
ctx.beginPath();
ctx.fillStyle="#fff";
ctx.arc(278,160,10,0,2*Math.PI) ;
ctx.fill()
// 4.1眼珠
ctx.beginPath();
ctx.fillStyle="#000";
ctx.arc(283,163,5,0,2*Math.PI) ;
ctx.fill()
}
//openM() closeM()
// 1.創建變量數值
var index=0;
// 2.創建定時器
var t=setInterval(()=>{
// 3數值自增
index++;
// 4.偶數 張嘴
if(index%2==0){
openM();
}else{
// 5.奇數 閉嘴
closeM();
}
},500)
</script>
</html>
5、cavas-圓形動態進度條
樣式圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./jquery.js"></script>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<canvas id="c3" width="500" height="400"></canvas>
</body>
<script>
var c3=document.getElementById("c3");
var ctx=c3.getContext("2d");
// 繪製動態進度條
// 1創建變量保存起始角度與結束角度
var start=-90;
var end=-90;
// 2.創建變量保存數值 1%;
var num=0;
// 3.創建定時器
var t=setInterval(()=>{
// 4.清畫布
ctx.clearRect(0,0,500,400)
// 5.創建灰色底框
ctx.beginPath();
ctx.arc(250,200,80,0,2*Math.PI)
// 6.設置邊線顏色與線寬
ctx.strokeStyle="#999";//顏色
ctx.lineWidth=15;//線寬
ctx.stroke();
// 7.動態綠色條
// 8.修改結束角度+3.6
end+=3.6;
// 9.畫圓
ctx.beginPath();
ctx.arc(250,200,80,start*Math.PI/180,end*Math.PI/180);
ctx.strokeStyle="#f5a";
ctx.stroke();
// 10.繪製文字100%
ctx.stroke();
// 11.數值加一 num
num+=1;
// 12.繪製畫布中心
ctx.font="25px SimHei"
ctx.fillText(num+"%",240,195);
// 13：如果num>=100 停止定時器
if(num>=100){
clearInterval(t)
}
},100)
</script>
</html>
6、canvas模擬實現樹的生長
樣式圖：
代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tree</title>
</head>
<body>
<canvas id='d1' width="500" height="400" style="border:dashed 2px #ccc;"></canvas>
<script>
var drawtree = function (ctx,startx,starty,length,angle,depth,branchWidth){
var rand=Math.random,
n_length,n_angle,n_depth,maxbranch=4,
endx,endy,maxangle=2 * Math.PI / 4;
var subbranch;
ctx.beginPath();
ctx.moveTo(startx,starty);
endx=startx + length * Math.cos(angle);
endy=starty + length * Math.sin(angle);
ctx.lineCap='round';
ctx.lineWidth=branchWidth;
ctx.lineTo(endx,endy);
if(depth<=2 ){
//樹的枝幹
ctx.strokeStyle= 'rgb(0,' + (((rand() * 64) +128) >>0) + ',0)';
}
else{
//樹的葉子
ctx.strokeStyle= 'rgb(0,' + (((rand() * 64) +64) >>0) + ',50,25)';
}
ctx.stroke();
n_depth = depth-1;
//判斷樹是否結束
if(!n_depth){
return;
}
subbranch= (rand() * (maxbranch-1)) + 1;
branchWidth *=0.5;
for(var i=0;i<subbranch;i++){
n_angle = angle +rand() * maxangle -maxangle *0.5;
n_length = length * (0.5 + rand() *0.5);
setTimeout(function (){
drawtree(ctx,endx,endy,n_length,n_angle,n_depth,branchWidth);
return;
},500)
}
}
var canvas=document.getElementById('d1');
var ctx= canvas.getContext('2d');
//初始化的樹
drawtree(ctx,300,470,100,-Math.PI / 2, 12, 12);
</script>
</body>
</html>