使用Canvas畫小豬佩奇

2019-12-12 09:42:42

使用Canvas畫一個小豬佩奇

1

第一步建立Html頁面，將Canvas 標籤引入我們建立一個寬度（width）為400px,高度為（height） 500px 的Canvas 畫布，為了讓畫布居中，幫他加些樣式tyle="border: 1px solid #808080; margin-left:400px;

2

第二步

寫上

然後Javascript 程式碼

注意：

var ct = document.getElementById('myCanvas').getContext('2d');

這裡是開始，每個Canvas 都要寫上這句話，不然無效

ct.beginPath() //開始

ct.lineWidth = "3"; // 寬度 3cm 的線

ct.strokeStyle = "pink"; // 線段顏色為粉紅

//起點

ct.moveTo(75, 15); //控制範圍結束

//context.quadraticCurveTo(cpx, cpy, x, y);

ct.quadraticCurveTo(220, 26, 220, 160); //第一步坐標軸

ct.moveTo(219, 141);

ct.quadraticCurveTo(240, 300, 70, 250); //第三步

// ct.stroke()

ct.moveTo(76, 253);

ct.quadraticCurveTo(16, 220, 74, 111);

ct.moveTo(73, 112);

ct.quadraticCurveTo(60, 112, 31, 83);

ct.moveTo(31, 83);

ct.quadraticCurveTo(23, 26, 75, 15);

ct.moveTo(75, 15);

ct.quadraticCurveTo(108, 32, 99, 61);

ct.moveTo(99, 61);

ct.quadraticCurveTo(66, 101, 31, 81);

ct.stroke();

注意，這裡你需要一張小豬佩奇照片

然後大致把他頭畫出來了

3

// 鼻子的兩個孔

ct.beginPath();

ct.arc(48, 48, 6, 0 * Math.PI, 2.5 * Math.PI);

ct.stroke();

ct.beginPath();

ct.arc(77, 48, 6, 0 * Math.PI, 2.5 * Math.PI);

ct.stroke();

//耳朵

//左耳朵

ct.beginPath();

ct.moveTo(149, 31);

ct.quadraticCurveTo(155, 0, 189, 6);

ct.moveTo(189, 6);

ct.quadraticCurveTo(188, 30, 170, 44);

//右耳朵

ct.moveTo(188, 59);

ct.quadraticCurveTo(198, 24, 222, 32);

ct.moveTo(222, 32);

ct.quadraticCurveTo(255, 54, 199, 75);

ct.stroke();

//嘴巴

ct.beginPath();

ct.arc(93, 178, 30, 0 * Math.PI, 2.5 * Math.PI);

ct.stroke();

//眼睛

ct.beginPath();

ct.strokeStyle = " #BDBDBD";

ct.arc(141, 67, 14, 0 * Math.PI, 2.5 * Math.PI);

ct.stroke();

ct.beginPath();

ct.strokeStyle = "#000000";

ct.arc(136, 64, 6, 0 * Math.PI, 2.5 * Math.PI);

ct.stroke();

ct.beginPath();

ct.strokeStyle = " #BDBDBD";

ct.arc(170, 88, 14, 0 * Math.PI, 2.5 * Math.PI);

ct.stroke();

ct.beginPath();

ct.strokeStyle = "#000000";

ct.fillStyle = "#FF0000";

ct.arc(165, 87, 6, 0 * Math.PI, 2.5 * Math.PI);

ct.stroke();

// 粉紅嘴腮

ct.beginPath();

ct.strokeStyle = " #CD8C95";

ct.arc(178, 147, 20, 0 * Math.PI, 2.5 * Math.PI);

ct.stroke();

4

//身體

ct.beginPath();

ct.strokeStyle = "red";

ct.moveTo(195, 245);

ct.quadraticCurveTo(215, 215, 244, 410);

ct.moveTo(244, 410);

ct.quadraticCurveTo(244, 410, 38, 410);

ct.moveTo(38, 410);

ct.quadraticCurveTo(11, 410, 76, 251);

ct.stroke();

//兩隻手

//左手

ct.beginPath();

ct.strokeStyle = "pink";

ct.moveTo(58, 294);

ct.quadraticCurveTo(50, 288, 12, 238);

ct.moveTo(56, 300);

ct.quadraticCurveTo(56, 300, 16, 260);

ct.lineTo(3, 269);

ct.lineTo(11, 250);

ct.lineTo(3, 228);

ct.lineTo(15, 241);

ct.stroke();

//右手

ct.beginPath();

ct.moveTo(223, 292);

ct.quadraticCurveTo(266, 288, 287, 271);

ct.moveTo(287, 271);

ct.quadraticCurveTo(236, 233, 279, 245);

ct.moveTo(279, 245);

ct.quadraticCurveTo(255, 200, 295, 247);

ct.moveTo(295, 247);

ct.quadraticCurveTo(288, 200, 306, 226);

ct.moveTo(306, 226);

ct.quadraticCurveTo(311, 250, 308, 248);

ct.moveTo(308, 248);

ct.quadraticCurveTo(344, 200, 334, 245);

ct.moveTo(334, 245);

ct.quadraticCurveTo(311, 280, 300, 280);

ct.moveTo(300, 280);

ct.quadraticCurveTo(311, 280, 224, 303);

ct.stroke();

//左腳

ct.beginPath();

ct.moveTo(94, 409);

ct.quadraticCurveTo(94, 409, 96, 451);

ct.moveTo(96, 451);

ct.quadraticCurveTo(53, 429, 56, 461);

ct.moveTo(56, 461);

ct.quadraticCurveTo(56, 461, 107, 464);

ct.lineTo(106, 409);

//右腳

ct.moveTo(183, 411);

ct.lineTo(182, 447);

ct.quadraticCurveTo(124, 434, 136, 464);

ct.lineTo(196, 463);

ct.lineTo(195, 409);

ct.stroke();

//尾巴

ct.beginPath();

ct.lineWidth = "7";

ct.strokeStyle = "pink";

ct.lineCap = "round";

ct.moveTo(238, 360);

ct.quadraticCurveTo(266, 380, 267, 360);

ct.quadraticCurveTo(254, 330, 250, 380);

ct.quadraticCurveTo(254, 420, 290, 369);

ct.stroke();

我承認自己的審美觀不太好，但是也還是看的過去，對吧，。。。

嗯，這個佩奇，需要自己微調一下地方，自己定位一下，就可以了

5

好了，到這裡就完了哦，感謝你的閱讀哦，覺得好，就點個讚吧，這樣我也有動力繼續寫下去哦

使用Canvas畫小豬佩奇

1

2

3

4

5

熱門文章