教你如何利用canvas畫布繪製哆啦A夢
最近一直在練習使用canvas畫布標籤,今天教大家如何使用canvas畫布繪製哆啦A夢。如圖:
HTML代碼:
<canvas id="my_canvas"></canvas>
CSS代碼:
canvas {
display:block;
margin:0 auto;
background: pink
}
JavaScript代碼:
var oCanvas = document.getElementById("my_canvas");
oCanvas.width = 600;
oCanvas.height = 600;
var context = oCanvas.getContext("2d");
// document.onclick = function (ev) {
// console.log(ev.pageX, ev.pageY)
// }
// 1.大腦袋
context.beginPath();
context.arc(300, 300, 250, 0, Math.PI * 2);
context.lineWidth = "5";
context.stroke();
context.fillStyle = "rgb(34,118,207)";
context.fill();
// 2.大臉蛋子
// context.scale(1,0.9);
// context.beginPath();
// context.arc(300,410,200,0,Math.PI*2);
// context.lineWidth="5";
// context.stroke();
// context.ellipse(x,y,r1,r2,旋轉的角度,起始角度,結束角度)
context.beginPath();
context.ellipse(300, 380, 200, 170, 0, 0, Math.PI * 2);
context.stroke();
context.fillStyle = "white";
context.fill();
// 3.大嘴巴子
context.beginPath();
context.arc(300, 460, 50, 0, Math.PI * 2);
context.stroke();
context.fillStyle = "black";
context.fill();
context.beginPath();
context.ellipse(300, 470, 48, 40, 0, 0, Math.PI * 2);
context.stroke();
context.fillStyle = "red";
context.fill();
// 4.大眼珠子
context.beginPath();
context.ellipse(248, 230, 50, 60, 0, 0, Math.PI * 2);
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
context.ellipse(270, 230, 20, 30, 0, 0, Math.PI * 2);
context.stroke();
context.fillStyle = "black";
context.fill();
context.beginPath();
context.ellipse(270, 230, 5, 10, 0, 0, Math.PI * 2);
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
context.ellipse(352, 230, 50, 60, 0, 0, Math.PI * 2);
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
context.ellipse(330, 230, 20, 30, 0, 0, Math.PI * 2);
context.stroke();
context.fillStyle = "black";
context.fill();
context.beginPath();
context.ellipse(330, 230, 5, 10, 0, 0, Math.PI * 2);
context.stroke();
context.fillStyle = "white";
context.fill();
// 5.大鼻子
context.beginPath();
context.lineWidth = "3";
context.arc(300, 290, 30, 0, 2 * Math.PI);
context.stroke();
context.fillStyle = "red";
context.fill();
// 6.畫鬍子
context.lineWidth="5";
huzi(125,294,230,335);
huzi(113,370,222,366);
huzi(125,434,222,398);
huzi(376,335,465,282);
huzi(385,369,490,354);
huzi(385,400,488,420);
// 畫鬍子的方法
function huzi(x1, y1, x2, y2) {
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
}
總結: 繪製哆啦A夢的頭部其實很簡單,只需要知道人如何繪製圓形和線條即可,同時要知道圖層的前後順序。
視頻講解鏈接:
https://www.bilibili.com/video/BV1454y1Q7Aq/