今天接到粉絲私信,詢問是否可以通過Canvas繪製一些圖形,然後根據粉絲提供的模板圖,通過Canvas進行模擬繪製,通過分析發現,圖形雖然相對簡單,但是如果不借助相應的軟件,純代碼繪製還是稍微費些時間。今天將繪製圖形源碼分享出來,僅供學習分享之用,如有不足之處,還請指正。
什麼是Canvas?
Canvas表示一個圖形容器(稱之爲畫布),可以使用腳本來繪製圖形。
Canvas座標
canvas 是一個二維網格。canvas 的左上角座標爲 (0,0)。如下圖所示,畫布的 X 和 Y 座標用於在畫布上對繪畫進行定位。鼠標移動的矩形框上,顯示定位座標。
Canvas接口
Canvas默認提供了簡單圖形繪製功能,如直線,矩形,圓弧,貝塞爾曲線等,通過接口可以繪製簡單的圖形,複雜的圖形需要通過簡單的圖形進行不同組合來實現。
具體可參考:https://www.w3school.com.cn/jsref/dom_obj_canvas.asp
需求原圖
首先看下粉絲髮來的原圖,其中紅框內容的圖形相對稍微有點複雜,如下所示:
Canvas繪製圖
通過Canvas繪製相應圖形,效果如下所示:
Canvas繪製源碼
首先創建Canvas畫圖容器,通過canvas標籤進行創建。每一個圖形用一個容器進行創建,相互獨立,如下所示:
<canvas id="bigHeadCanvas" width="150" height="150"></canvas>
<canvas id="circleCanvas" width="150" height="150"></canvas>
<canvas id="fishCanvas" width="150" height="150"></canvas>
<canvas id="heartCanvas" width="150" height="150"></canvas>
<canvas id="pandaCanvas" width="150" height="150"></canvas>
<canvas id="sunFlowerCanvas" width="150" height="150"></canvas>
<canvas id="fiveStarCanvas" width="150" height="150"></canvas>
<canvas id="catCanvas" width="150" height="150"></canvas>
<canvas id="foxCanvas" width="150" height="150"></canvas>
<canvas id="appleCanvas" width="150" height="150"></canvas>
<canvas id="rectCanvas" width="150" height="150"></canvas>
<canvas id="sixCanvas" width="150" height="150"></canvas>
<canvas id="diamondCanvas" width="150" height="150"></canvas>
<canvas id="circleRectCanvas" width="150" height="150"></canvas>
<canvas id="eggCanvas" width="150" height="150"></canvas>
1. 繪製大頭熊
繪製大頭熊,代碼如下所示:
function drawBigHead(){
var c = document.getElementById("bigHeadCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50,50,50,Math.PI*1.85,Math.PI*1.15);
ctx.stroke();
ctx.beginPath();
ctx.arc(50,50,45,Math.PI*1.35,Math.PI*1.68);
ctx.stroke();
ctx.beginPath();
ctx.arc(17,17,15,Math.PI*0.7,Math.PI*1.8);//左耳
ctx.stroke();
ctx.beginPath();
ctx.arc(87,17,15,Math.PI*1.15,Math.PI*0.3);//右耳
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('大頭熊形',30,130);
}
注意:前兩句爲創建Canvas上下文對象,先獲取畫布控件,再創建對象,然後就可以利用對象創建圖形。
2. 繪製圓形
繪製圓形圖案,如下所示:
function drawCircle(){
var c = document.getElementById("circleCanvas");
var ctx = c.getContext("2d");
ctx.arc(55,55,50,Math.PI*0,Math.PI*2);
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('圓形',35,130);
}
3. 繪製魚形
繪製魚形,如下所示:
function drawFish(){
var c = document.getElementById("fishCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(56,52,52,Math.PI*0.75,Math.PI*1.44);
ctx.stroke();
ctx.beginPath();
ctx.arc(32,52,52,Math.PI*1.57,Math.PI*0.25);
ctx.stroke();
ctx.beginPath();
ctx.arc(42,135,32,Math.PI*1.30,Math.PI*1.70);
ctx.stroke();
ctx.beginPath();
ctx.arc(17,105,8,Math.PI*0.15,Math.PI*1.3);
ctx.lineTo(20,88);
ctx.stroke();
ctx.beginPath();
ctx.arc(67,105,8,Math.PI*0.88,Math.PI*1.75,true);
ctx.lineTo(70,88);
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('魚形',28,130);
}
4. 繪製心形
繪製心形圖案,如下所示:
function drawHeart(){
var c = document.getElementById("heartCanvas");
var ctx = c.getContext("2d");
ctx.arc(36,26,20,Math.PI*0.75,Math.PI*1.75);
ctx.lineTo(60,25);
ctx.lineTo(70,10);
ctx.stroke();
ctx.beginPath();
ctx.arc(83,26,20,Math.PI*1.25,Math.PI*0.25);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(21,40);
ctx.lineTo(60,90);
ctx.lineTo(98,40);
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('心形',45,130);
}
5. 繪製大熊形
繪製大熊形,代碼如下所示:
function drawPanda(){
var c = document.getElementById("pandaCanvas");
var ctx = c.getContext("2d");
//上
ctx.arc(18,15,15,Math.PI*0.75,Math.PI*1.85);
ctx.stroke();
ctx.beginPath();
ctx.arc(80,15,15,Math.PI*1.13,Math.PI*0.20);
ctx.lineTo(88,39);
ctx.stroke();
ctx.beginPath();
ctx.arc(48,75,70,Math.PI*1.42,Math.PI*1.59);
ctx.stroke();
//中
ctx.beginPath();
ctx.arc(30,55,28,Math.PI*0.75,Math.PI*1.25);
ctx.lineTo(6,23);
ctx.stroke();
ctx.beginPath();
ctx.arc(66,55,28,Math.PI*1.78,Math.PI*0.25);
ctx.lineTo(80,88);
ctx.stroke();
//下
ctx.beginPath();
ctx.arc(25,93,12,Math.PI*0.27,Math.PI*1.20);
ctx.lineTo(10,74);
ctx.stroke();
ctx.beginPath();
ctx.arc(70,93,12,Math.PI*1.83,Math.PI*0.73);
ctx.stroke();
ctx.beginPath();
ctx.arc(47,135,35,Math.PI*1.35,Math.PI*1.65);
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('大熊形',33,130);
}
6. 繪製太陽花
繪製太陽花,代碼如下所示:
function drawSunFlower(){
var c = document.getElementById("sunFlowerCanvas");
var ctx = c.getContext("2d");
var startX=2;
var startY=2;
var radius=15;
//上
ctx.beginPath();
ctx.arc(startX+4*radius,startY+1.5*radius,radius,Math.PI*1,Math.PI*0);
ctx.stroke();
//下
ctx.beginPath();
ctx.arc(startX+4*radius,startY+6.3*radius,radius,Math.PI*0,Math.PI*1);
ctx.stroke();
//左
ctx.beginPath();
ctx.arc(startX+1.5*radius,startY+4.0*radius,radius,Math.PI*0.4,Math.PI*1.6);
ctx.stroke();
//右
ctx.beginPath();
ctx.arc(startX+6.2*radius,startY+4*radius,radius,Math.PI*0.5,Math.PI*1.5,true);
ctx.stroke();
//上右
ctx.beginPath();
ctx.arc(startX+5.7*radius,startY+2.1*radius,radius,Math.PI*1.20,Math.PI*0.40);
ctx.stroke();
//上左
ctx.beginPath();
ctx.arc(startX+2.0*radius,startY+2.0*radius,radius,Math.PI*1.9,Math.PI*0.60,true);
ctx.stroke();
//下左
ctx.beginPath();
ctx.arc(startX+2.0*radius,startY+6.0*radius,radius,Math.PI*0,Math.PI*1.38);
ctx.stroke();
//下右
ctx.beginPath();
ctx.arc(startX+5.8*radius,startY+5.8*radius,radius,Math.PI*0.78,Math.PI*1.58,true);
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('太陽花形',35,130);
}
7. 繪製五角星
繪製五角星形,如下所示:
function drawFiveStar(){
var c = document.getElementById("fiveStarCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(30,20);
ctx.beginPath();
ctx.lineTo(50,0);//頂
ctx.lineTo(70,20);
ctx.lineTo(100,30);
ctx.lineTo(85,60);
ctx.lineTo(80,90);
ctx.lineTo(50,80);//底
ctx.lineTo(20,90);
ctx.lineTo(15,60);
ctx.lineTo(0,30);
ctx.lineTo(30,20);
ctx.closePath();
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('五角星',33,130);
}
8. 繪製貓咪頭
繪製貓咪頭形狀,代碼如下所示:
function drawCat(){
var c = document.getElementById("catCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(60,75,60,Math.PI*1.42,Math.PI*1.58);//頂
ctx.stroke();
ctx.beginPath();
ctx.arc(60,55,50,Math.PI*0.64,Math.PI*1.2);//左下
ctx.stroke();
ctx.beginPath();
ctx.arc(55,55,50,Math.PI*1.82,Math.PI*0.38);//右下
ctx.stroke();
ctx.beginPath();
ctx.arc(55,140,45,Math.PI*1.35,Math.PI*1.65);//下
ctx.stroke();
ctx.beginPath();
ctx.arc(65,20,45,Math.PI*0.95,Math.PI*1.35);//左耳下
ctx.stroke();
ctx.beginPath();
ctx.arc(10,45,45,Math.PI*1.6,Math.PI*1.8);//左耳上
ctx.stroke();
ctx.beginPath();
ctx.arc(115,60,60,Math.PI*1.25,Math.PI*1.40);//右耳上
ctx.stroke();
ctx.beginPath();
ctx.arc(55,15,45,Math.PI*1.90,Math.PI*0.12);//右耳下
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('貓咪頭形',33,130);
}
9. 繪製狐狸頭
繪製狐狸頭形狀,代碼如下所示:
function drawFox(){
var c = document.getElementById("foxCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(60,75,60,Math.PI*1.45,Math.PI*1.55);//頂
ctx.stroke();
ctx.beginPath();
ctx.arc(70,20,45,Math.PI*0.95,Math.PI*1.35);//左耳下
ctx.stroke();
ctx.beginPath();
ctx.arc(15,45,45,Math.PI*1.6,Math.PI*1.8);//左耳上
ctx.stroke();
ctx.beginPath();
ctx.arc(110,60,60,Math.PI*1.25,Math.PI*1.40);//右耳上
ctx.stroke();
ctx.beginPath();
ctx.arc(50,15,45,Math.PI*1.90,Math.PI*0.12);//右耳下
ctx.stroke();
ctx.beginPath();
ctx.arc(60,50,40,Math.PI*0.4,Math.PI*0.6); //底部
ctx.lineTo(45,80); //左臉
ctx.lineTo(2,50);
ctx.lineTo(26,27);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(92,30);//右臉
ctx.lineTo(115,50);
ctx.lineTo(75,80);
ctx.lineTo(70,90);
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('狐狸頭形',33,130);
}
10. 繪製蘋果
繪製蘋果形狀,代碼如下所示:
function drawApple(){
var c = document.getElementById("appleCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.width=100;
img.height=100;
img.src="apple.png";
var id=setTimeout(function(){
//console.log("超時執行");
if(img.complete){
ctx.drawImage(img, 10, 10,100,100);
clearTimeout(id);
}
},100);
ctx.font="12px Airal";
ctx.strokeText('蘋果形',35,130);
}
注意,Canvas不僅可以繪製圖形,也可以添加圖像元素。由於蘋果圖形相對複雜,所以採用繪製Image對象的方式進行繪製。
11. 繪製矩形
繪製矩形,代碼如下所示:
function drawRect(){
var c = document.getElementById("rectCanvas");
var ctx = c.getContext("2d");
ctx.rect(10,10,100,80);
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('矩形',35,130);
}
12. 繪製六邊形
繪製六邊形,如下所示:
function drawSix(){
var c = document.getElementById("sixCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
var centerX=50;
var centerY=50;
var radius=50;
ctx.moveTo(centerX+radius*Math.cos(Math.PI*0),centerY+radius*Math.sin(Math.PI*0));
for(var i=0;i<5;i++){
ctx.lineTo(centerX+radius*Math.cos(Math.PI*(i+1)*(1/3)),centerY+radius*Math.sin(Math.PI*(i+1)*(1/3)));
}
ctx.closePath();
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('六邊形',35,130);
}
注意:六邊形相當於將圓進行六平分,取六個頂點進行連線,所以此處採用for循環進行繪製。
13. 繪製鑽石
繪製鑽石形,如下所示:
function drawDiamond(){
var c = document.getElementById("diamondCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,5);
ctx.lineTo(90,5);
ctx.lineTo(110,35);
ctx.lineTo(55,100);
ctx.lineTo(0,35);
ctx.closePath();
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('鑽石形',33,130);
}
14. 繪製側角長條形
繪製側角長條形,代碼如下所示:
function drawCircleRect(){
var c = document.getElementById("circleRectCanvas");
var ctx = c.getContext("2d");
var centerX=20;
var centerY=5;
ctx.beginPath();
ctx.moveTo(centerX+ 15,centerY+ 5);
ctx.lineTo(centerX+60,centerY+ 5);
ctx.lineTo(centerX+60,centerY+ 80);
ctx.arc(centerX+50,centerY+ 80,10,Math.PI*0,Math.PI*0.5);
ctx.lineTo(centerX+5,centerY+ 90);
ctx.lineTo(centerX+5,centerY+ 15)
ctx.arc(centerX+15,centerY+ 15,10,Math.PI*1,Math.PI*1.5);
ctx.closePath();
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('側角長條形',30,130);
}
15. 繪製雞蛋
繪製雞蛋形,如下所示:
function drawEgg(){
var c = document.getElementById("eggCanvas");
var ctx = c.getContext("2d");
ctx.rotate(10*Math.PI/180);
var centerX=40;
var centerY=2;
ctx.beginPath();
ctx.arc(centerX+30,centerY+ 60,30,Math.PI*0,Math.PI*1);
ctx.lineTo(centerX+15,centerY+ 25);
ctx.arc(centerX+35,centerY+ 25,20,Math.PI*1,Math.PI*0);
ctx.lineTo(centerX+60,centerY+ 60);
ctx.closePath();
ctx.stroke();
ctx.rotate(-10*Math.PI/180);
ctx.font="12px Airal";
ctx.strokeText('雞蛋形',30,130);
}
注意:因爲雞蛋形有點傾斜,所以繪製的時候進行了旋轉。
以上就是Html中利用Canvas進行繪製圖形的全部內容。