登录
搜索
搜索
首页 小白人生 JavaScript 正文

复习canvas之画蓝胖子

柏平 3年前 (2017-12-29) 2725℃ 1次吐槽

在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>

至此绘制就完成了，以上代码有不足之处还望大神们指出顺便赐教与交流哈。此外，小多啦的铃铛没画，有空补上

选择赏赐方式：

×

多少都是心意，感谢大家

选择分享方式：

×

扫一扫分享到微信朋友圈

标签： 蓝胖子canvascanvas画布

本文标题：复习canvas之画蓝胖子

本文地址：https://www.zbpnice.cn/post/150.html

温馨提示：文章内容系作者个人观点，不代表柏平博客对观点赞同或支持。

版权声明： 本文为原创文章，创建于3年前 (2017-12-29)，版权归 柏平 所有，欢迎分享本文，转载请保留出处！

评论列表 :共有1人吐槽, 2725人围观

优质香港空间
优质香港空间  3年前 (2017-12-29)  沙发回复
蓝胖子少了个铃铛 face_02 face_02

发表评论:

备案号：湘ICP备17009941号-1
Theme zbpLucky by 柏平博客 基于Z-BlogPHP