利用HTML5實現Canvas機器貓圖形特效



10 39 14



特效描述:利用HTML5實現 Canvas 機器貓 圖形特效,利用HTML5實現Canvas機器貓圖形特效

代碼結構

1. HTML代碼

<center><canvas id="mycanvas" width="500" height="600"></canvas></center>
<script>
//auth :Simple-Wu
var mycanvas = document.getElementById('mycanvas');
var f = mycanvas.getContext('2d');
var mycanvas = document.getElementById('mycanvas');
var context = mycanvas.getContext('2d');
context.beginPath();
context.fillStyle = 'blue';
context.arc(200, 175, 135, 45 * Math.PI / 180, 135 * Math.PI / 180, true);
context.closePath();
context.fill();
context.stroke();
context.beginPath();
context.fillStyle = 'white';
context.arc(200, 200, 110, 40 * Math.PI / 180, 140 * Math.PI / 180, true);
context.fill();
context.stroke();
context.beginPath();
context.lineWidth = 2;
context.fillStyle = 'white';
context.moveTo(200, 100);
context.bezierCurveTo(210, 40, 140, 40, 150, 100);
context.lineTo(150, 100);
context.bezierCurveTo(160, 130, 190, 130, 200, 100);
context.closePath();
context.fill();
context.stroke();
// 左
context.beginPath();
context.moveTo(165, 80);
context.quadraticCurveTo(187, 75, 195, 95);
context.stroke();
context.beginPath();
context.moveTo(160, 100);
context.quadraticCurveTo(175, 85, 195, 95);
context.stroke();
context.beginPath();
context.fillStyle = 'white';
context.moveTo(200, 100);
context.bezierCurveTo(190, 40, 260, 40, 250, 100);
context.lineTo(250, 100);
context.bezierCurveTo(240, 130, 210, 130, 200, 100);
context.closePath();
context.fill();
context.stroke();
// 右
context.beginPath();
context.save();
context.scale(1, 2);
context.translate(0, -50);
context.arc(214, 95, 10, 0, 2 * Math.PI);
context.fillStyle = 'black';
context.fill();
context.closePath();
context.restore();
context.stroke()
context.beginPath();
context.fillStyle = 'white';
context.arc(211, 95, 7, 0, 2 * Math.PI);
context.fill();
context.stroke();
// 鼻子
context.beginPath();
context.fillStyle = 'red';
context.lineWidth = 2;
context.arc(200, 150, 20, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(200, 170);
context.quadraticCurveTo(205, 190, 200, 240);
context.stroke();
// 嘴
context.beginPath();
context.moveTo(120, 205);
context.bezierCurveTo(160, 250, 240, 250, 280, 205);
context.stroke();
// 脖子
context.beginPath();
context.strokeStyle = 'red';
context.lineWidth = 10;
context.lineCap = 'round';
context.moveTo(100, 270);
context.lineTo(300, 270);
context.stroke();
// 胳膊
context.beginPath();
context.strokeStyle = 'black';
context.lineWidth = 2;
context.moveTo(110, 275);
context.fillStyle = 'blue';
context.quadraticCurveTo(50, 300, 98, 380);
// context.beginPath();
context.lineTo(105, 330);
context.quadraticCurveTo(90, 400, 105, 450);
// context.stroke();
// context.beginPath();
context.lineTo(105, 450);
context.quadraticCurveTo(150, 480, 200, 450);
context.lineTo(200, 450);
context.quadraticCurveTo(255, 480, 295, 450);
context.lineTo(295, 450);
context.quadraticCurveTo(310, 400, 295, 330);
context.lineTo(302, 380);
context.quadraticCurveTo(350, 300, 290, 275);
context.fillStyle = 'blue';
context.closePath();
context.fill();
context.stroke();
// 肚子
context.beginPath();
context.strokeStyle = 'black';
context.fillStyle = 'white';
context.lineWidth = 2;
context.moveTo(140, 275);
context.bezierCurveTo(50, 440, 350, 440, 260, 275);
context.fill();
context.stroke();
// 肚兜
context.beginPath();
context.arc(200, 330, 50, 0, Math.PI, false);
context.closePath();
context.stroke();
//鈴鐺
context.beginPath();
context.fillStyle = 'gold';
context.strokeStyle = 'black';
context.lineWidth = 2;
context.arc(200, 295, 20, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.beginPath();
context.lineWidth = 2;
context.rect(181, 288, 38, 5);
context.stroke();
context.beginPath();
context.arc(200, 300, 7, 0, 2 * Math.PI);
context.stroke();
//  鞋
context.beginPath();
context.moveTo(105, 450);
context.bezierCurveTo(40, 490, 150, 500, 195, 480);
context.stroke();
context.beginPath();
context.moveTo(295, 450);
context.bezierCurveTo(350, 490, 255, 500, 195, 480);
context.stroke();
//  腳縫
context.beginPath();
context.moveTo(200, 450);
context.quadraticCurveTo(200, 465, 195, 480);
context.stroke();
// 腿縫
context.beginPath();
context.moveTo(200, 410);
context.quadraticCurveTo(205, 430, 200, 450);
context.stroke();
// 胡子
context.beginPath();
context.moveTo(90, 140);
context.lineTo(160, 160);
context.stroke();
context.beginPath();
context.moveTo(80, 170);
context.lineTo(160, 175);
context.stroke();
context.beginPath();
context.moveTo(80, 195);
context.lineTo(160, 190);
context.stroke();
context.beginPath();
context.moveTo(240, 175);
context.lineTo(320, 170);
context.stroke();
context.beginPath();
context.moveTo(240, 160);
context.lineTo(320, 150);
context.stroke();
context.beginPath();
context.moveTo(240, 190);
context.lineTo(320, 195);
context.stroke();
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 扑克游戏喝酒 学冶金怎样赚钱 干洗和皮具护理赚钱吗 三个骰子大小玩法计算 北单比竞彩好 建基站赚钱吗 4399象棋小游戏在线玩 必赢彩票后续 新疆时时彩开奖结果 江苏11选5走势图 新时时彩完美计划软件 麻将来了怎么开好友房新版 安徽25选5开奖视频 北京pk10牛牛算法 游戏什么的好玩又赚钱的游戏吗 看到别人赚钱自已很浮躁