在HTML5中的新标签canvas元素用于图形的绘制，但canvas画布本身并不能画图，所以我们必须通过脚本 (通常是JavaScript)来完成.通过canvas元素，我们可以在画布上画出各种图形，线条，矩形，圆形，椭圆，字体，渐变等，当然可以自己设计组合绘制自己想要的图案。趁着对canvas还有一点余温，博主特意练习了一下，利用canvas画了一个简单的蓝胖子。
效果图：
需要掌握的方法：
| quadraticCurveTo() | 创建二次贝塞尔曲线 |
| bezierCurveTo() | 创建三次方贝塞尔曲线 |
| arc() | 创建弧/曲线（用于创建圆形或部分圆） |
| arcTo() | 创建两切线之间的弧/曲线 |
核心代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="height = device-height,width = device-width,initial-scale = 1.0,minimum-scale = 1.0,maximum-scale = 1.0,user-scalable = no">
<title>柏平博客之哆啦A梦</title>
</head>
<body>
<div class="canvasBox">
<canvas id="myCanvas" width="500" height="500" onmousemove="xy(event)" onmouseleave="clear()"></canvas>
<span id="xy"></span>
</div>
<style>
.canvasBox{
width: 500px;
height: 500px;
margin:40px auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
var Canvas = document.getElementById('myCanvas');
var CanvasId = Canvas.getContext('2d');
var htmlWidth = parseInt(screen.width/2);
var htmlHeight = parseInt(htmlWidth*0.618);
//创建头部
CanvasId.beginPath();//开始绘制
CanvasId.lineWidth = 1;
CanvasId.arc(250,70,70,0.7*Math.PI,0.3*Math.PI);
CanvasId.fillStyle="#0bb0da";//定义填充颜色
CanvasId.fill();//填充颜色
CanvasId.strokeStyle="#000" ;
CanvasId.stroke();
//绘制脸部
CanvasId.beginPath();//开始绘制
CanvasId.fillStyle = "#fff";
CanvasId.moveTo(220,40);
CanvasId.quadraticCurveTo(170, 100, 220, 125);//创建二次贝塞尔曲线,控制点(170,100),结束点(220,125)
CanvasId.lineTo(280, 125);//添加一个新点，然后在画布中创建从（220，40）到（280，125）的线条
CanvasId.quadraticCurveTo(330, 100, 280, 40);
CanvasId.lineTo(220,40);
CanvasId.strokeStyle="#000" ;
CanvasId.fill();
CanvasId.stroke();
//绘制眼睛
CanvasId.beginPath();
CanvasId.fillStyle = "#fff";
//绘制左眼睛
CanvasId.moveTo(220,40);
CanvasId.bezierCurveTo(220,10,250,10,250,40);//绘制上半圆,创建三次贝塞尔曲线,控制点1(220,10),控制点2(250,10)结束点(250,40)
CanvasId.bezierCurveTo(250,70,220,70,220,40);//绘制下半圆
//绘制右眼睛
CanvasId.moveTo(250,40);
CanvasId.bezierCurveTo(250,10,280,10,280,40);
CanvasId.bezierCurveTo(280,70,250,70,250,40);
CanvasId.fill();
CanvasId.stroke();
//绘制左眼球
CanvasId.beginPath();
CanvasId.fillStyle = "#000";
CanvasId.arc(240,50,5,0,2*Math.PI);//创建以(240,50)为圆心，半径为5，弧度为0的圆
CanvasId.fill();
CanvasId.stroke();
//绘制右眼球
CanvasId.beginPath();
CanvasId.fillStyle = "#000";
CanvasId.arc(260,50,5,0,2*Math.PI);
CanvasId.fill();
CanvasId.stroke();
//绘制鼻子
CanvasId.beginPath();
CanvasId.fillStyle = "#d05823";
CanvasId.arc(250,68,10,0,2*Math.PI);
CanvasId.fill();
CanvasId.stroke();
//绘制鼻子之间的线
CanvasId.beginPath();
CanvasId.moveTo(250,80);
CanvasId.lineTo(250,100);
CanvasId.stroke();
//绘制左边上胡须
CanvasId.beginPath();
CanvasId.moveTo(210,80);
CanvasId.lineTo(240,85);
//绘制左边中间胡须
CanvasId.moveTo(210,90);
CanvasId.lineTo(240,90);
//绘制左边下面胡须
CanvasId.moveTo(210,100);
CanvasId.lineTo(240,95);
CanvasId.stroke();
//绘制右边上胡须
CanvasId.beginPath();
CanvasId.moveTo(260,85);
CanvasId.lineTo(290,80);
//绘制右边中间胡须
CanvasId.moveTo(260,90);
CanvasId.lineTo(290,90);
//绘制右边下面胡须
CanvasId.moveTo(260,95);
CanvasId.lineTo(290,100);
//绘制嘴巴
CanvasId.moveTo(220,110);
CanvasId.bezierCurveTo(220,120,280,120,280,110);
CanvasId.stroke();
//绘制围巾
CanvasId.beginPath();
CanvasId.moveTo(202,125); // 创建开始点
CanvasId.lineTo(290,125); // 创建水平线
CanvasId.arcTo(300,125,300,130,5); // 创建弧
CanvasId.arcTo(300,140,290,140,5); // 创建弧
CanvasId.lineTo(240,140); // 创建垂直线
CanvasId.arcTo(200,140,200,135,5); // 创建弧
CanvasId.lineTo(200,130); // 创建垂直线
CanvasId.arcTo(200,125,260,125,5); // 创建弧
CanvasId.lineTo(260,125); // 创建垂直线
CanvasId.fillStyle = '#b13209';
CanvasId.fill();
CanvasId.stroke();
CanvasId.beginPath();
CanvasId.fillStyle = '#0bb0da';
CanvasId.moveTo(210,140);
//绘制左边衣服
CanvasId.lineTo(170,180);
CanvasId.lineTo(189,199);
CanvasId.lineTo(210,180);
CanvasId.lineTo(210,230);
CanvasId.lineTo(240,230);
//绘制右边衣服
CanvasId.lineTo(290,230);
CanvasId.lineTo(290,180);
CanvasId.lineTo(315,199);
CanvasId.lineTo(334,180);
CanvasId.lineTo(290,140);
CanvasId.fill();
CanvasId.stroke();
//绘制右手
CanvasId.beginPath();
CanvasId.fillStyle = "#FFF";
CanvasId.arc(180,190,16,0,2*Math.PI);
CanvasId.fill();
CanvasId.stroke();
//绘制左手
CanvasId.beginPath();
CanvasId.fillStyle = "#FFF";
CanvasId.arc(324,190,16,0,2*Math.PI);
CanvasId.fill();
CanvasId.stroke();
//绘制两个脚之间的空隙
CanvasId.beginPath();
CanvasId.fillStyle = "#fff";
CanvasId.moveTo(240,231);
CanvasId.bezierCurveTo(240,210,261,210,260,231);
CanvasId.fill();
CanvasId.stroke();
//绘制肚子
CanvasId.beginPath();
CanvasId.fillStyle = "#FFF";
CanvasId.arc(250,159,33,1.8*Math.PI,1.2*Math.PI);
CanvasId.fill();
CanvasId.stroke();
//绘制百宝袋
CanvasId.beginPath();
CanvasId.fillStyle = "#FFF";
CanvasId.moveTo(230,160);
CanvasId.lineTo(270,160);
CanvasId.arc(250,159,20,0,1*Math.PI);
CanvasId.fill();
CanvasId.stroke();
//绘制左脚
CanvasId.beginPath();
CanvasId.fillStyle = '#fff';
CanvasId.moveTo(206,230); // 创建开始点
CanvasId.lineTo(240,230);
CanvasId.bezierCurveTo(246,230,248,240,242,245);
CanvasId.moveTo(242,245); // 创建开始点
CanvasId.lineTo(206,245);
CanvasId.bezierCurveTo(200,240,200,235,206,230);
//绘制右脚
CanvasId.moveTo(258,230); // 创建开始点
CanvasId.lineTo(294,230);
CanvasId.bezierCurveTo(300,235,300,240,295,245);
CanvasId.moveTo(295,245); // 创建开始点
CanvasId.lineTo(258,245);
CanvasId.bezierCurveTo(252,240,252,234,258,230);
CanvasId.fill();
CanvasId.stroke();
}
function xy(e) {
var xy = document.getElementById('xy');
xy.innerHTML = 'x:'+e.offsetX+'<br>y:'+e.offsetY;
}
function clear(){
var xy = document.getElementById('xy');
xy.innerHTML = '';
}
</script>
</body>
</html>至此绘制就完成了，以上代码有不足之处还望大神们指出顺便赐教与交流哈。此外，小多啦的铃铛没画，有空补上
评论列表 :共有1人吐槽, 4894人围观