HTML5 Canvas基本线条绘制的实例教程


Posted in HTML / CSS onMarch 17, 2016

怎么画线条?和现实中画画差不多:
1.移动画笔,使画笔移动至绘画的开始处
2.确定第一笔的停止点
3.规划好之后,选择画笔(包括画笔的粗细和颜色等)
4.确定绘制

因为Canvas是基于状态的绘制(很重要,后面会解释),所以前面几步都是在确定状态,最后一步才会具体绘制。
1.移动画笔(moveTo())
之前我们获得了画笔context,所以以此为例,给出改方法的使用实例——context.moveTo(100,100)。这句代码的意思是移动画笔至(100,100)这个点(单位是px)。记住,这里是以canvas画布的左上角为笛卡尔坐标系的原点,且y轴的正方向向下,x轴的正方向向右。
2.笔画停点(lineTo())
同理,context.lineTo(600,600)。这句的意思是从上一笔的停止点绘制到(600,600)这里。不过要清楚,这里的moveTo()``lineTo()都只是状态而已,是规划,是我准备要画,还没有开始画,只是一个计划而已!
3.选择画笔
这里我们暂且只设置一下画笔的颜色和粗细。
context.lineWidth = 5,这句话的意思是设置画笔(线条)的粗细为10px。
context.strokeStyle = "#AA394C",这句话的意思是设置画笔(线条)的颜色为玫红色。
因为Canvas是基于状态的绘制,所以我们在选择画笔粗细和颜色的同时,其实也是选择了线条的粗细和颜色。
4.确定绘制
确定绘制只有两种方法,fill()和stroke(),有点绘画基础的应该知道,前者是指填充,后者是指描边。因为我们只是绘制线条,所以只要描边就可以了。调用代码context.stroke()即可。

画一个线条
不就一条线段吗!废话了这么多!那我们就开始画吧。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>从线条开始</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.moveTo(100,100);   
  22.         context.lineTo(600,600);   
  23.         context.lineWidth = 5;   
  24.         context.strokeStyle = "#AA394C";   
  25.         context.stroke();   
  26.     }   
  27. </script>   
  28. </body>   
  29. </html>   
  30.   

运行结果:
HTML5 Canvas基本线条绘制的实例教程

(一直有小伙伴问我页面右下角的熊是什么鬼?哦哦,之前忘解释了,那个是我的防伪水印!)
我还标注了一个页面解析图,供大家参考。
HTML5 Canvas基本线条绘制的实例教程

这里我将原本<canvas>标签中的width和height去掉了,但在JavaScript代码中设置了canvas对象的width和height的属性。

小结:要设置画布的大小,只有这两种方法

1.在<canvas>标签中设置;

2.在JS代码中设置canvas的属性.

怎么样,是不是非常的酷。接下来我们要加快脚步了,绘制一个多线条组成的图形。是不是感觉自己离艺术家又进了一步呢?别看这只是简简单单的一条线段,这一画只是我们的一小步,但却是人类的一大步!

绘制折线
上面我们已经成功绘制了一条线段。那么,如果我要绘制有两个笔画甚至是很多笔画的折线怎么办呢?
聪明的小伙伴肯定已经想到了,这还不简单,复用lineTo()就可以了。下面我就献丑随便画了一条优美的折线~

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>绘制折线</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.moveTo(100,100);   
  22.         context.lineTo(300,300);   
  23.         context.lineTo(100,500);   
  24.         context.lineWidth = 5;   
  25.         context.strokeStyle = "#AA394C";   
  26.         context.stroke();   
  27.     }   
  28. </script>   
  29. </body>   
  30. </html>  

运行结果:
HTML5 Canvas基本线条绘制的实例教程

绘制多条折线
那同理,我们要绘制多条样式各不相同的折线怎么办呢?比如我们在这里画三条折线,分别是红色、蓝色、黑色。聪明的小伙伴肯定想到了,这还不简单,只需要平移一下再改下画笔颜色就行了。代码格式都一样的,复制就可以了。代码如下。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>绘制折线</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.moveTo(100,100);   
  22.         context.lineTo(300,300);   
  23.         context.lineTo(100,500);   
  24.         context.lineWidth = 5;   
  25.         context.strokeStyle = "red";   
  26.         context.stroke();   
  27.   
  28.         context.moveTo(300,100);   
  29.         context.lineTo(500,300);   
  30.         context.lineTo(300,500);   
  31.         context.lineWidth = 5;   
  32.         context.strokeStyle = "blue";   
  33.         context.stroke();   
  34.   
  35.         context.moveTo(500,100);   
  36.         context.lineTo(700,300);   
  37.         context.lineTo(500,500);   
  38.         context.lineWidth = 5;   
  39.         context.strokeStyle = "black";   
  40.         context.stroke();   
  41.     }   
  42. </script>   
  43. </body>   
  44. </html>  

运行结果:
HTML5 Canvas基本线条绘制的实例教程

咦?是不是很奇怪?说好的先红色,再蓝色,再黑色呢?怎么全是黑色了?其实,这里的原因是我之前一直强调的一点——Canvas是基于状态的绘制。
什么意思呢?其实这段代码每次使用stroke()时,它都会把之前设置的状态再绘制一遍。第一次stroke()时,绘制一条红色的折线;第二次stroke()时,会再重新绘制之前的那条红色的折线,但是这个时候的画笔已经被更换成蓝色的了,所以画出的折线全是蓝色的。换言之,strokeStyle属性被覆盖了。同理,第三次绘制的时候,画笔颜色是最后的黑色,所以会重新绘制三条黑色的折线。所以,这里看到的三条折线,其实绘制了3次,一共绘制了6条折线。
那么,我想绘制三条折线,难道就没有办法了吗?艺术家之魂到此为止了么?没救了么?不,还有办法。
使用beginPath()开始绘制
为了让绘制方法不重复绘制,我们可以在每次绘制之前加上beginPath(),代表下次绘制的起始之处为beginPath()之后的代码。我们在三次绘制之前分别加上context.beginPath()。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>绘制折线</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.beginPath();   
  22.         context.moveTo(100,100);   
  23.         context.lineTo(300,300);   
  24.         context.lineTo(100,500);   
  25.         context.lineWidth = 5;   
  26.         context.strokeStyle = "red";   
  27.         context.stroke();   
  28.   
  29.         context.beginPath();   
  30.         context.moveTo(300,100);   
  31.         context.lineTo(500,300);   
  32.         context.lineTo(300,500);   
  33.         context.lineWidth = 5;   
  34.         context.strokeStyle = "blue";   
  35.         context.stroke();   
  36.   
  37.         context.beginPath();   
  38.         context.moveTo(500,100);   
  39.         context.lineTo(700,300);   
  40.         context.lineTo(500,500);   
  41.         context.lineWidth = 5;   
  42.         context.strokeStyle = "black";   
  43.         context.stroke();   
  44.     }   
  45. </script>   
  46. </body>   
  47. </html>  

HTML5 Canvas基本线条绘制的实例教程

可以看到,这里得到了我们预想的结果。因为使用了beginPath(),所以这里的绘制过程如我们所想的那样,只绘制了三次,而且每次只绘制一条折线。beginPath()是绘制设置状态的起始点,它之后代码设置的绘制状态的作用域结束于绘制方法stroke()、fill()或者closePath(),至于closePath()之后会讲到。
所以我们每次开始绘制前都务必要使用beginPath(),为了代码的完整性,建议大家在每次绘制结束后使用closePath()。

HTML / CSS 相关文章推荐
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
使用CSS实现音波加载效果
May 07 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 #HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 #HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 #HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 #HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 #HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 #HTML / CSS
HTML5实现多张图片上传功能
Mar 11 #HTML / CSS
You might like
php header Content-Type类型小结
2011/07/03 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
Python bytes string相互转换过程解析
2020/03/05 Python
python和php哪个容易学
2020/06/19 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
自荐书模板
2013/12/15 职场文书
新闻发布会主持词
2014/03/28 职场文书
《凡卡》教学反思
2014/04/09 职场文书
环保倡议书怎么写
2014/05/16 职场文书
作风大整顿心得体会
2014/09/10 职场文书
打架检讨书
2015/01/27 职场文书
青岛导游词
2015/02/12 职场文书
2016党员党课心得体会
2016/01/07 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
Vue全局事件总线你了解吗
2022/02/24 Vue.js
Java实现注册登录跳转
2022/06/16 Java/Android