教你如何利用canvas画布绘制哆啦A梦

最近一直在练习使用canvas画布标签，今天教大家如何使用canvas画布绘制哆啦A梦。如图：

HTML代码：

 <canvas id="my_canvas"></canvas>

CSS代码：

        canvas {display:block;margin:0 auto;background: pink}

JavaScript代码：

    var oCanvas = document.getElementById("my_canvas");oCanvas.width = 600;oCanvas.height = 600;var context = oCanvas.getContext("2d");// document.onclick = function (ev) {//     console.log(ev.pageX, ev.pageY)// }// 1.大脑袋context.beginPath();context.arc(300, 300, 250, 0, Math.PI * 2);context.lineWidth = "5";context.stroke();context.fillStyle = "rgb(34,118,207)";context.fill();// 2.大脸蛋子// context.scale(1,0.9);// context.beginPath();// context.arc(300,410,200,0,Math.PI*2);// context.lineWidth="5";// context.stroke();// context.ellipse(x,y,r1,r2,旋转的角度，起始角度，结束角度)context.beginPath();context.ellipse(300, 380, 200, 170, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();// 3.大嘴巴子context.beginPath();context.arc(300, 460, 50, 0, Math.PI * 2);context.stroke();context.fillStyle = "black";context.fill();context.beginPath();context.ellipse(300, 470, 48, 40, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "red";context.fill();// 4.大眼珠子context.beginPath();context.ellipse(248, 230, 50, 60, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.ellipse(270, 230, 20, 30, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "black";context.fill();context.beginPath();context.ellipse(270, 230, 5, 10, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.ellipse(352, 230, 50, 60, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.ellipse(330, 230, 20, 30, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "black";context.fill();context.beginPath();context.ellipse(330, 230, 5, 10, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();// 5.大鼻子context.beginPath();context.lineWidth = "3";context.arc(300, 290, 30, 0, 2 * Math.PI);context.stroke();context.fillStyle = "red";context.fill();// 6.画胡子context.lineWidth="5";huzi(125,294,230,335);huzi(113,370,222,366);huzi(125,434,222,398);huzi(376,335,465,282);huzi(385,369,490,354);huzi(385,400,488,420);// 画胡子的方法function huzi(x1, y1, x2, y2) {context.beginPath();context.moveTo(x1, y1);context.lineTo(x2, y2);context.stroke();}

总结： 绘制哆啦A梦的头部其实很简单，只需要知道人如何绘制圆形和线条即可，同时要知道图层的前后顺序。

视频讲解链接：
https://www.bilibili.com/video/BV1454y1Q7Aq/

教你如何利用canvas画布绘制哆啦A梦相关推荐

HTML5利用canvas画布绘制哆啦A梦
效果图: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
利用canvas画布画哆啦A梦
简易版哆啦A梦源代码: <!DOCTYPE html> <html><head><title>哆啦A梦</title><meta ch ...
H5 canvas画布总结（绘制哆啦A梦）
canvas标签只是图形容器定义图形,使用 canvas 绘制路径,盒.圆.字符以及添加图像 1.创建一个画布 <canvas id='cv' width='400px' height='60 ...
【python】利用python的tkinter-canvas函数绘制哆啦A梦过程详解（附源码）
1 引言绘制哆啦A梦的过程,其实是对哆啦A梦进行拆解的过程,得先构思出他的头部.眼睛.鼻子.嘴巴.胡须.身体.铃铛.口袋.手以及脚等(如下图所示),才能进行下一步的绘画工作.心中有丘壑,方能水到渠 ...
前端|利用canvas画布制作地球轨道
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 一.什么是<canvas> <canvas& ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
用canvas画布绘制扇形和弧线
<title>用canvas画布绘制扇形和弧线</title> <style> .box{ width: 600px; margin: 0 auto; } < ...
利用canvas画布和rotate()方法让画的图形旋转起来
上一篇讲了利用canvas画布画太极图,这一篇说的是让太极图旋转起来. **思路:**利用HTML DOM 的setInterval()方法,它会按照指定的周期来调用函数或计算表达式.再利用画布的ro ...
用canvas画布绘制等腰三角形
<title>用canvas画布绘制等腰三角形</title> </head> <body> <canvas id="mycan&quo ...

教你如何利用canvas画布绘制哆啦A梦

教你如何利用canvas画布绘制哆啦A梦

教你如何利用canvas画布绘制哆啦A梦相关推荐

最新文章

热门文章