canvas综合应用绘制哆啦A梦
HTML5中canvas元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.通过这一元素,我们可以在画布上画出各种图形,线条,矩形,圆形,椭圆,字体,渐变等,当然可以自己设计组合绘制自己想要的图案,今天,笔者通过canvas绘制了一个哆啦A梦的图案,其中,应用了颜色渐变,贝塞尔曲线等知识点,是对canvas的一个较综合的应用。请看效果图:
通过canvas画图需要确定各个点,比较繁琐,读者需要有耐心。请看代码:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 600px;height: 800px;border: 1px solid black;margin: 0 auto;}</style></head><body><div class="box"><canvas id="canvas" width="600px" height="800px"></canvas></div><script type="text/javascript">var canvas = document.getElementById("canvas");var ctx = canvas.getContext('2d');ctx.lineWidth = 4;/*画椭圆*/function ellipse(context, x, y, a, b) {context.save();var r = (a > b) ? a : b;var ratioX = a / r;var ratioY = b / r;context.scale(ratioX, ratioY);context.beginPath();context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);context.closePath();context.restore();context.fillStyle = "black";if(a<=10){context.fillStyle = "white";}context.fill();}//头部外圈ctx.beginPath();ctx.arc(300,200,200,0.25*Math.PI,0.75*Math.PI,true);ctx.quadraticCurveTo(306, 403, 444, 340);var color = ctx.createRadialGradient(140,50,20,120,30,200);color.addColorStop(0.0,"white");color.addColorStop(1.0,"#019FE8");ctx.fillStyle = color;ctx.fill();ctx .stroke();ctx.closePath();//头部内圈ctx.beginPath();ctx.arc(300,230,175,0.25*Math.PI,0.75*Math.PI,true);ctx.quadraticCurveTo(306, 403, 424, 350);ctx.fillStyle = "white";ctx.fill();ctx.stroke();ctx.closePath();//左眼睛ctx.beginPath();ctx.moveTo(300, 50);ctx.arc(260,50,40,0,2*Math.PI);ctx.moveTo(256, 60);ctx.quadraticCurveTo(273, 25, 286, 60);ctx.fillStyle = "white";ctx.fill();ctx.stroke();ctx.closePath();//右眼睛ctx.beginPath();ctx.moveTo(380, 50);ctx.arc(340,50,40,0,2*Math.PI);ctx.fillStyle = "white";ctx.fill();ctx.stroke();ctx.closePath();//椭圆眼珠子ellipse(ctx, 326, 50, 14, 20);ellipse(ctx, 322, 46, 5, 7);//鼻子ctx.beginPath();ctx.moveTo(300, 125);ctx.arc(300,100,25,0.5*Math.PI,2.5*Math.PI);ctx.fillStyle = "#E70012";ctx.fill();ctx.lineTo(300,200);ctx.stroke();ctx.closePath();ellipse(ctx, 306, 96, 9, 9);//胡须ctx.beginPath();ctx.moveTo(260,125);ctx.lineTo(180,100);ctx.moveTo(260,150);ctx.lineTo(160,150);ctx.moveTo(260,175);ctx.lineTo(170,200);ctx.moveTo(340,125);ctx.lineTo(420,100);ctx.moveTo(340,150);ctx.lineTo(440,150);ctx.moveTo(340,175);ctx.lineTo(430,200);ctx.moveTo(173, 125);ctx.bezierCurveTo(96, 95, 88, 238, 200, 218);ctx.moveTo(422, 119);ctx.bezierCurveTo(501, 84, 517, 217, 402, 215);ctx.fillStyle = "white";ctx.fill();ctx.stroke();ctx.closePath();//嘴巴ctx.beginPath();ctx.moveTo(164, 218);ctx.quadraticCurveTo(298, 453, 434, 214);ctx.bezierCurveTo(414,218,340,192,300,200);ctx.bezierCurveTo(260,192,186,218,164, 218);ctx.fillStyle = "#E70012";ctx.fill();ctx.stroke();ctx.closePath();//舌头ctx.beginPath();ctx.moveTo(233, 308);ctx.bezierCurveTo(230, 271, 283, 268, 300, 284);ctx.bezierCurveTo(319, 271, 371, 264, 359, 310);ctx.quadraticCurveTo(298, 360, 233, 308);ctx.fillStyle = "#EC6D1E";ctx.fill();ctx.stroke();ctx.closePath();//左手ctx.beginPath();ctx.moveTo(100,400);ctx.arc(80,440,45,0,2*Math.PI);ctx.stroke();ctx.closePath();//身子ctx.beginPath();ctx.moveTo(150, 360);ctx.lineTo(100,400);ctx.quadraticCurveTo(90, 430, 120, 440);ctx.lineTo(150,430);ctx.lineTo(154,386);ctx.quadraticCurveTo(140, 500, 150, 560);ctx.quadraticCurveTo(136,580,140,600);ctx.quadraticCurveTo(200,610,270,600);ctx.arc(300,600,30,1*Math.PI,2*Math.PI);ctx.quadraticCurveTo(390,610,460,600);ctx.quadraticCurveTo(466,580,450,560);ctx.quadraticCurveTo(460,500,450,386);ctx.moveTo(452,420);ctx.lineTo(560,280);ctx.lineTo(520,250);ctx.lineTo(480,286);ctx.quadraticCurveTo(400,450,150, 360);ctx.fillStyle = "#019fe8";ctx.fill();ctx.stroke();ctx.closePath();//肚兜ctx.beginPath();ctx.moveTo(200,440);ctx.bezierCurveTo(170,580,440,570,400,440);ctx.bezierCurveTo(390,360,210,360,200,440);ctx.moveTo(220,460);ctx.bezierCurveTo(210,550,400,540,380,460);ctx.quadraticCurveTo(300,470,220,460);ctx.fillStyle = "white";ctx.fill();ctx.stroke();ctx.closePath();//脖子ctx.beginPath();ctx.moveTo(444, 340);ctx.quadraticCurveTo(306, 403, 156, 340);ctx.quadraticCurveTo(146, 340, 150, 360);ctx.quadraticCurveTo(306, 423, 450, 360);ctx.quadraticCurveTo(454, 340, 444, 340);ctx.fillStyle = "#E30115";ctx.fill();ctx.stroke();ctx.closePath();//铃铛ctx.beginPath();ctx.moveTo(334, 410);ctx.arc(300,410,34,0,2*Math.PI);ctx.strokeStyle = "black";ctx.fillStyle = "#FFD000";ctx.moveTo(265, 404);ctx.quadraticCurveTo(289, 395, 336, 404);ctx.moveTo(265, 412);ctx.quadraticCurveTo(289, 403, 336, 412);ctx.moveTo(300,444);ctx.lineTo(300,424);ctx.fill();ctx.stroke();ctx.closePath();ctx.beginPath();ctx.moveTo(305, 420);ctx.arc(300,420,5,0,2*Math.PI);ctx.strokeStyle = "black";ctx.fillStyle = "gray";ctx.fill();ctx.stroke();ctx.closePath();//右手ctx.beginPath();ctx.moveTo(595,250);ctx.arc(550,250,45,0,2*Math.PI);ctx.fillStyle = "white";ctx.fill();ctx.stroke();ctx.closePath();//左脚ctx.beginPath();ctx.moveTo(140,600);ctx.quadraticCurveTo(100,610,100,640);ctx.bezierCurveTo(100,700,300,680,290,640);ctx.quadraticCurveTo(290,610,270,600);ctx.stroke();ctx.closePath();//右脚ctx.beginPath();ctx.moveTo(330,600);ctx.quadraticCurveTo(310,610,310,640);ctx.bezierCurveTo(320,700,510,680,500,640);ctx.quadraticCurveTo(500,610,460,600);ctx.stroke();ctx.closePath();//字体ctx.beginPath();ctx.lineWidth = 2;ctx.font = "bold 40px 楷体";var fontColor = ctx.createLinearGradient(250,455,280,545);fontColor.addColorStop(0.0,"yellow");fontColor.addColorStop(1.0,"red");ctx.fillStyle = fontColor;ctx.fillText("梦",280,505,50);ctx.closePath();</script></body>
</html>
读者需要注意,通过canvas画图,填充颜色的时候后面的颜色会覆盖住前面的颜色,最简单的解决方法就是调整一下前后位置就可以。读者可以自行运行,查看效果。
canvas综合应用绘制哆啦A梦相关推荐
- 教你如何利用canvas画布绘制哆啦A梦
教你如何利用canvas画布绘制哆啦A梦 最近一直在练习使用canvas画布标签,今天教大家如何使用canvas画布绘制哆啦A梦.如图: HTML代码: <canvas id="my_ ...
- H5 canvas画布总结 (绘制哆啦A梦)
canvas标签 只是图形容器定义图形,使用 canvas 绘制路径,盒.圆.字符以及添加图像 1.创建一个画布 <canvas id='cv' width='400px' height='60 ...
- 【python】利用python的tkinter-canvas函数绘制哆啦A梦过程详解(附源码)
1 引 言 绘制哆啦A梦的过程,其实是对哆啦A梦进行拆解的过程,得先构思出他的头部.眼睛.鼻子.嘴巴.胡须.身体.铃铛.口袋.手以及脚等(如下图所示),才能进行下一步的绘画工作.心中有丘壑,方能水到渠 ...
- python画图哆啦a梦-使用Python的Turtle绘制哆啦A梦实例
这是我几年前为了练习python的turtle库而画的,今天翻出了代码,分享给大家. 这是我初学python时画的,当时还没有面向对象的概念,也没有采取类方法之类,纯原始手工,供大家参考. 若有兴趣可 ...
- python画图哆啦a梦-python 绘制哆啦A梦
[实例简介] 绘制哆啦A梦 [实例截图] [核心代码] #!/usr/bin/python # -*- coding: UTF-8 -*- # 哆啦A梦 import turtle def flyTo ...
- 用python画多来a梦-python 绘制哆啦A梦
[实例简介] 绘制哆啦A梦 [实例截图] [核心代码] #!/usr/bin/python # -*- coding: UTF-8 -*- # 哆啦A梦 import turtle def flyTo ...
- 用python画多来a梦-使用Python的Turtle绘制哆啦A梦实例
这是我几年前为了练习python的turtle库而画的,今天翻出了代码,分享给大家. 这是我初学python时画的,当时还没有面向对象的概念,也没有采取类方法之类,纯原始手工,供大家参考. 若有兴趣可 ...
- java画哆啦A梦_java如何绘制哆啦A梦 java绘制哆啦A梦代码示例
java如何绘制哆啦A梦?本篇文章小编给大家分享一下java绘制哆啦A梦代码示例,绘制的哆啦A梦超可爱,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 以下是画出哆啦a梦的代 ...
- python3绘制哆啦A梦
之前做过少儿编程 前面也分享过两个教案 Python学习笔记(一)--Python安装与开发环境配置 python学习笔记(二)--初识turtle海龟绘图 现在分享一个用turtle绘制哆啦A梦的例 ...
最新文章
- Microsoft.Bcl.Build 1.0.10 稳定版发布
- 如何过渡至 Python 3
- hdu5452(2015沈阳网络赛C题)
- 拥抱变化——从Atlas到ASP.NET AJAX(1):下载安装总览
- bootstrap 模态框满屏_解决Ueditor在bootstarp 模态框中全屏问题
- Django之models
- Go WebSocket开发与测试实践【gorilla/websocket】
- log4j:WARN Please initialize the log4j system properly解决办法
- 【转载】「微信小程序」有哪些冲击与机会?
- 【STM32+STM32CubeMX】控制ws2812b灯珠
- java的applet教程_Java Applet基础
- 个人计算机之前,很久之前的个人pc机 文曲星,是什么档次,jrs还有印象么?
- 前工程师讲解:开关电源设计-LLC电源
- Oracle Database-数据处理和表的管理部分
- 计算机硬件相关行业,2021年中国电脑硬件行业市场规模及发展前景预测分析(图)...
- 公交线路客流预测——手把手教你玩数据(一)
- 膨胀卷积神经网络_用膨胀的卷积神经网络生成钢琴音乐
- 【UE4教程文档翻译】First Person Shooter C++ Tutoria(第一人称射击C++教程)
- STM32之ADC配置,ADC_Mode模式理解
- 博科SAN交换机:常用命令行
热门文章
- 泥塑课c语言,【C】泥塑课(From http://www.jisuanke.com/)
- sklearn朴素贝叶斯分类器_手撕朴素贝叶斯分类器源码(Naive Bayesian)
- leecode-8字符串转化为整数C版
- java list转数组_java list 转数组
- DSO 中的Windowed Optimization
- java 单向链表 双向链表_java 单向链表与双向链表的实现
- mysql 添加最高权限设置_mysql 添加用户并设置权限
- Python的贝叶斯网络学习库pgmpy介绍和使用
- 【LeetCode】剑指 Offer 55 - II. 平衡二叉树
- mac下使用brew安装java等应用