持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
简介
哈喽,大家好,第一次写文章,那就先来一个前些月火爆了的冰墩墩吧!
效果
代码块
<html>
<head>
<title>BingDwenDwen</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<canvas id="tutorial" width="510" height="600"></canvas>
</body>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
//角1
ctx.beginPath();
ctx.moveTo(110, 170); //起始点
var cp1x = 80, cp1y = 70; //控制点1
var cp2x = 140, cp2y = 100; //控制点2
var x = 160, y = 110; // 结束点
//绘制二次贝塞尔曲线
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.fill();
//角2
ctx.beginPath();
ctx.moveTo(340, 110); //起始点
var cp1x = 360, cp1y = 100; //控制点1
var cp2x = 440, cp2y = 80; //控制点2
var x = 390, y = 170; // 结束点
//绘制二次贝塞尔曲线
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.fill();
//身体上半圆
ctx.beginPath();
ctx.moveTo(90, 300); //起始点
var cp1x = 60, cp1y = 10; //控制点1
var cp2x = 440, cp2y = 10; //控制点2
var x = 410, y = 300; // 结束点
ctx.lineWidth = 3;
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();
//身体下半圆
ctx.beginPath();
ctx.moveTo(90, 300); //起始点
var cp1x = 85, cp1y = 520; //控制点1
var cp2x = 415, cp2y = 520; //控制点2
var x = 410, y = 300; // 结束点
ctx.lineWidth = 3;
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();
//左手
ctx.beginPath();
ctx.moveTo(90, 290); //起始点
var cp1x = -80, cp1y = 350; //控制点1
var cp2x = 110, cp2y = 450; //控制点2
var x =90, y = 300; // 结束点
ctx.lineWidth = 2;
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.fill();
//右手
ctx.beginPath();
ctx.moveTo(409, 320); //起始点
var cp1x = 400, cp1y = 180; //控制点1
var cp2x = 600, cp2y = 240; //控制点2
var x = 406, y = 340; // 结束点
ctx.lineWidth = 2;
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.fill();
//左脚
ctx.beginPath();
ctx.moveTo(150, 435); //起始点
var cp1x = 160, cp1y = 590; //控制点1
var cp2x = 300, cp2y = 590; //控制点2
var x = 230, y = 465; // 结束点
ctx.lineWidth = 2;
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.fill();
//右脚
ctx.beginPath();
ctx.moveTo(290, 460); //起始点
var cp1x = 210, cp1y = 590; //控制点1
var cp2x = 360, cp2y = 590; //控制点2
var x = 355, y = 430; // 结束点
ctx.lineWidth = 2;
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.fill();
//圆脸上1
ctx.beginPath();
ctx.moveTo(120, 240); //起始点
var cp1x = 130, cp1y = 90; //控制点1
var cp2x = 370, cp2y = 90; //控制点2
var x = 380, y = 240; // 结束点
ctx.lineWidth = 3;
ctx.strokeStyle='#769149'
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();
//圆脸下1
ctx.beginPath();
ctx.moveTo(120, 240); //起始点
var cp1x = 110, cp1y = 390; //控制点1
var cp2x = 390, cp2y = 390; //控制点2
var x = 380, y = 240; // 结束点
ctx.lineWidth = 3;
ctx.strokeStyle='#769149'
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();
//圆脸上2
ctx.beginPath();
ctx.moveTo(123, 243); //起始点
var cp1x = 130, cp1y = 93; //控制点1
var cp2x = 370, cp2y = 93; //控制点2
var x = 377, y = 243; // 结束点
ctx.lineWidth = 3;
ctx.strokeStyle='#dea32c'
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();
//圆脸下2
ctx.beginPath();
ctx.moveTo(123, 243); //起始点
var cp1x = 115, cp1y = 387; //控制点1
var cp2x = 390, cp2y = 387; //控制点2
var x = 377, y = 240; // 结束点
ctx.lineWidth = 3;
ctx.strokeStyle='#dea32c'
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();
//圆脸上3
ctx.beginPath();
ctx.moveTo(123, 246); //起始点
var cp1x = 130, cp1y = 96; //控制点1
var cp2x = 370, cp2y = 96; //控制点2
var x = 375, y = 246; // 结束点
ctx.lineWidth = 3;
ctx.strokeStyle='#aa2116'
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();
//圆脸下3
ctx.beginPath();
ctx.moveTo(123, 246); //起始点
var cp1x = 120, cp1y = 385; //控制点1
var cp2x = 390, cp2y = 385; //控制点2
var x = 375, y = 240; // 结束点
ctx.lineWidth = 3;
ctx.strokeStyle='#aa2116'
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();
//左眼
ctx.beginPath();
ctx.ellipse(190,220,30,43,70,0,Math.PI*2);
// ctx.fillStyle="#058";
ctx.strokeStyle="#000";
ctx.fill();
ctx.stroke();
//右眼
ctx.beginPath();
ctx.ellipse(310,220,30,43,-70,0,Math.PI*2);
// ctx.fillStyle="#058";
ctx.strokeStyle="#000";
ctx.fill();
ctx.stroke();
//鼻子
ctx.beginPath();
ctx.moveTo(250, 260); //起始点
var cp1x = 200, cp1y = 230; //控制点1
var cp2x = 300, cp2y = 230; //控制点2
var x = 240, y = 260; // 结束点
ctx.lineWidth = 3;
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.fill();
//左眼珠子
ctx.beginPath();
ctx.ellipse(200,220,20,20,70,0,Math.PI*2);
ctx.fillStyle="#fff";
ctx.strokeStyle="#000";
ctx.fill();
ctx.beginPath();
ctx.ellipse(200,220,17,17,70,0,Math.PI*2);
ctx.fillStyle="#000";
// ctx.strokeStyle="#000";
ctx.fill();
ctx.beginPath();
ctx.ellipse(210,220,5,5,70,0,Math.PI*2);
ctx.fillStyle="#fff";
// ctx.strokeStyle="#000";
ctx.fill();
//右眼珠子
ctx.beginPath();
ctx.ellipse(300,220,20,20,70,0,Math.PI*2);
ctx.fillStyle="#fff";
ctx.strokeStyle="#000";
ctx.fill();
ctx.beginPath();
ctx.ellipse(300,220,17,17,70,0,Math.PI*2);
ctx.fillStyle="#000";
// ctx.strokeStyle="#000";
ctx.fill();
ctx.beginPath();
ctx.ellipse(290,220,5,5,70,0,Math.PI*2);
ctx.fillStyle="#fff";
// ctx.strokeStyle="#000";
ctx.fill();
//嘴巴
ctx.beginPath();
ctx.moveTo(220, 265); //起始点
var cp1x = 200, cp1y = 330; //控制点1
var cp2x = 300, cp2y = 330; //控制点2
var x = 280, y = 265; // 结束点
ctx.fillStyle="#000";
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.fill();
ctx.beginPath();
ctx.moveTo(220, 265); //起始点
var cp1x = 230, cp1y = 275; //控制点1
var cp2x = 270, cp2y = 275; //控制点2
var x = 280, y = 265; // 结束点
ctx.fillStyle="#fff";
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.fill();
ctx.beginPath();
ctx.moveTo(227, 305); //起始点
var cp1x = 230, cp1y = 275; //控制点1
var cp2x = 270, cp2y = 275; //控制点2
var x = 273, y = 306; // 结束点
ctx.fillStyle="#aa2116";
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.fill();
ctx.beginPath();
ctx.moveTo(227, 305); //起始点
var cp1x = 236, cp1y = 316; //控制点1
var cp2x = 258, cp2y = 320; //控制点2
var x = 273, y = 305; // 结束点
ctx.fillStyle="#aa2116";
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.fill();
}
draw();
</script>
</html>
