使用路径
绘制圆形
要想绘制其他图形,需要使用路径。同样的,绘制开始时还是要取得图形上下文,然后需要执行如下步骤:
- 开始创建路径;
- 创建图形的路径;
- 路径创建完成后,关闭路径;
- 设定绘制样式,调用绘制方法,绘制路径。
也就是说,首先使用路径来勾勒图形轮廓,然后设置颜色,进行绘制。
开始创建路径
首先,使用图形上下文对象的beginPath()方法,该方法的定义如下:
context.beginPath();
该方法不使用参数。通过调用该方法,开始路径的创建。
创建圆形路径
创建圆形路径时,需要使用图形上下文对象的arc()方法。该方法的定义如下:
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
该方法使用六个参数,前两个参数表示圆形的起点坐标的,radius为圆形半径,startAngle为开始角度,endAngle为结束角度,anticlockwise为是否按顺时针方向进行绘制。在Canvas API中,绘制半径与弧时指定的参数为开始弧度与结束弧度,如果喜欢使用角度,使用如下方法将角度转换为弧度:
var radians = degress * Math.PI / 180;
arc()方法不仅可以用来绘制圆形,也可以用来绘制圆弧。因此,使用时必须要指定开始角度与结束角度。因为这两个角度决定了弧度。anticlockwise参数为一个布尔值,为true时按顺时针绘制;为false时按逆时针方向绘制。
关闭路径
路径创建完成后,使用图形上下文对象的closePath()方法将路径关闭,该方法定义如下:
context.closePath();
将路径关闭后,路径的创建工作就完成了,但是请注意,这时只是路径创建完毕而已,还没有真正绘制任何图形。
设定绘制样式,进行图形绘制
使用创建好的路径绘制图形。在指定绘制样式时,与绘制矩形的方法一样,使用fillStyle属性和strokeStyle属性。绘制图形的时候,使用fill()方法或stroke()方法。这两个方法的功能分别为“填充图形”与“绘制图形边框”。因为路径已经决定了图形的大小,所以就不需要在该方法中使用参数来指定图形的大小了。示例如下:
function Canvas(id) { this.id = id; this.canvas = document.getElementById(id); this.context = this.canvas.getContext('2d'); } Canvas.prototype.fillStyle = function(style) { this.context.fillStyle = style; return this; }; Canvas.prototype.strokeStyle = function(style) { this.context.strokeStyle = style; return this; }; Canvas.prototype.lineWidth = function(width) { this.context.lineWidth = width; return this; }; Canvas.prototype.beginPath = function() { this.context.beginPath(); return this; }; Canvas.prototype.closePath = function() { this.context.closePath(); return this; }; Canvas.prototype.arc = function(x, y, radius, startAngle, endAngle, anticlockwise) { this.context.arc(x, y, radius, startAngle, endAngle, anticlockwise); return this; }; Canvas.prototype.fill = function() { this.context.fill(); return this; }; Canvas.prototype.stroke = function() { this.context.stroke(); return this; }; $(function() { var canvas = new Canvas($("canvas").attr("id")); canvas.fillStyle("#EEEEFF").fillRect(0, 0, 400, 400); var xy, r; for(var i = 0; i < 10; i++) { xy = i * 25; r = i * 10; canvas.beginPath().arc(xy, xy, r, 0, 2 * Math.PI, true).closePath().fillStyle('rgba(255, 0, 0, 0.25)').fill(); } });
如果没有关闭路径会怎么样
如果把上例中开始创建路径语句与关闭路径这一语句删除,会绘制出怎样的图形?试验后的结果表明,在画布中先是绘制一个深红色的半径最小的圆,然后每次半径变大的同时,圆的颜色仿佛也在逐渐变淡。
循环时的具体绘制过程如下:
- 创建并且绘制第一个圆。
- 创建第二个圆。这时,因为没有把第一个绘制圆的路径给关闭掉,所以第一个圆的路径也保留着。绘制第二个圆的时候,第一个圆会根据该路径重复绘制,第二个圆只绘制一次,而第一个圆绘制了两次。
- 创建第三个圆。绘制时,第三个圆绘制一次,第二个圆绘制两次,第一个圆绘制三次。
- 同上……
如果不关闭路径,已经创建的路径会永远保留着。就算用fill()方法与stroke()方法在页面上将图形已经绘制完毕,路径都不会消失。因此,如果把“使用路径进行绘制”这个方法进行循环,创建的图形会一次又一次地进行重叠。所以,如果不仔细对路径进行管理的话,会绘制出意想不到的图形。当然,也可以利用这一特点绘制出有趣的图形,更加漂亮的图形。所以,只创建一次,而重叠绘制也会得到广泛的应用。因此,在进行绘制的时候,还是要仔细计算好路径从哪里开始,在哪里关闭。
示例代码如下:
$(function() { var canvas = new Canvas($("canvas").attr("id")); canvas.fillStyle("#EEEEFF").fillRect(0, 0, 400, 400); var xy, r; for(var i = 0; i < 10; i++) { xy = i * 25; r = i * 10; canvas.arc(xy, xy, r, 0, 2 * Math.PI, true).fillStyle('rgba(255, 0, 0, 0.25)').fill(); } });
moveTo()与lineTo()
绘制直线时,一般会用到这两个方法,其中:
- moveTo()方法的作用是将光标移动到指定坐标点,绘制直线时以这个坐标点为起始坐标点,两个参数分别是坐标点的横坐标和纵坐标;
- lineTo()方法在moveTo()方法中指定直线起点与参数中指定的直线终点之间绘制一条直线,使用该方法绘制完直线后,光标自动移动到lineTo()方法的参数所指定的直线终点,这两个方法的定义如下:
context.moveTo(x, y); context.lineTo(x, y);
在创建路径时,需要使用moveTo()方法将光标移动到指定的直线起点,然后使用lineTo()方法在直线起点与直线终点之间创建路径,然后将光标移动到直线终点,在下一次使用lineTo()方法的时候,会以当前光标所在坐标点为直线起点,并在下一个用lineTo()方法指定的直线终点间创建路径,它会不断重复这个过程,来完成复杂图形的路径绘制。使用示例如下:
Canvas.prototype.moveTo = function(x, y) { this.context.moveTo(x, y); return this; }; Canvas.prototype.lineTo = function(x, y) { this.context.lineTo(x, y); return this; }; $(function() { var canvas = new Canvas($("canvas").attr("id")); canvas.fillStyle("#EEEEFF").fillRect(0, 0, 400, 400); var dx = 150, dy = 150, s = 100, dig = Math.PI / 15 * 11, x, y; canvas.beginPath().fillStyle('rgb(100, 255, 100)').strokeStyle('rgb(0, 0, 100)'); for(var i = 0; i < 30; i++) { x = Math.sin(i * dig); y = Math.cos(i * dig); canvas.lineTo(x * s + dx, y * s + dy); } canvas.closePath().fill().stroke(); });
使用bezierCurveTo()绘制贝济埃曲线
绘制贝济埃曲线时,需要使用bezierCurveTo()方法。该方法可以说是lineTo()方法的曲线版本,将从当前坐标点到指定坐标点中间的贝济埃曲线追加到路径中,该方法的定义如下:
context.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);
该方法使用六个参数。绘制贝济埃曲线的时候需要两个控制点,第一个控制点的坐标由前两个参数设置,第二个控制点的坐标由中间两个参数设置,最后两个参数设置贝济埃曲线的终点坐标。使用示例如下:
Canvas.prototype.bezierCurveTo = function(x1, y1, x2, y2, x, y) { this.context.bezierCurveTo(x1, y1, x2, y2, x, y); return this; }; Canvas.prototype.quadraticCurveTo = function(cpx1, cpy1, x, y) { this.context.quadraticCurveTo(cpx1, cpy1, x, y); return this; }; $(function() { var canvas = new Canvas($("canvas").attr("id")); canvas.fillStyle("#EEEEFF").fillRect(0, 0, 400, 400); var dx = 150, dy = 150, s = 100, dig = Math.PI / 15 * 11, x, y, cpx1, cpy1, cpx2, cpy2; canvas.beginPath().fillStyle('rgb(100, 255, 100)').strokeStyle('rgb(0, 0, 100)').moveTo(dx, dy); for(var i = 0; i < 30; i++) { x = Math.sin(i * dig) * s + dx; y = Math.cos(i * dig) * s + dy; cpx1 = x; cpy1 = y - 100; cpx2 = x + 100; cpy2 = y; canvas.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y); } canvas.closePath().fill().stroke(); });
另外,除了可以在canvas画布中绘制贝济埃曲线,还可以使用quadraticCurveTo()方法绘制二次样条曲线,该方法定义如下:
context.quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
相对来说,二次样条曲线的绘制比贝济埃曲线的绘制容易一些,因为只要设置二次样条曲线只有一个控制点和曲线终点坐标即可。
发表评论
-
使用选择器在页面中插入内容
2011-11-08 10:09 0使用选择器来插入文字 使用选择器来插入内容 在CSS2中, ... -
HTML5 绘制图形【4】
2011-11-08 08:39 1667绘制变形图形 坐标变换 绘制图形的时候,我们可能会想要旋转 ... -
CSS3 选择器【2】
2011-11-07 14:30 1046UI元素状态伪类选择器 UI元素状态伪类选择器的共同特征是: ... -
HTML5 绘制图形【3】
2011-11-05 19:28 1280绘制渐变图形 渐变是指在填充时从一种颜色慢慢过渡到另外一种颜 ... -
CSS3 选择器【1】
2011-11-06 12:19 1668选择器概述 选择器是CS ... -
HTML5 绘制图形【1】
2011-11-03 12:48 1454canvas元素基础 canvas元素是HTML5中新增的一 ... -
CSS3 模块化结构
2011-11-03 19:12 1459CSS3中的模块 模块名称 功能描述 Basi ... -
HTML5 获取地理位置信息
2011-11-01 18:12 5400Geolocation API的基本知识 在HTML5中,为 ... -
HTML5 使用Web Worker处理线程
2011-11-01 09:16 4600基础知识 Web Worker是在HTML5中新增的,用来在 ... -
HTML5 Web Sockets通信
2011-10-29 20:15 4045基础介绍 Web Sockets是HTML5提供的在Web应 ... -
HTML5 跨文档消息传输
2011-10-29 19:11 1970基本介绍 HTML5提供了在网页文档之间互相接收与发送信息的 ... -
HTML5 离线应用程序【2】
2011-10-27 20:48 1811applicationCache对象 application ... -
HTML5 离线应用程序【1】
2011-10-27 14:02 1513离线Web应用程序介绍 在HTML5中新增了一个API,为离 ... -
HTML5 本地数据库
2011-10-24 21:03 2551本地数据库的基本概念 ... -
HTML5 Web Storage
2011-10-24 15:51 1561Web Storage简单使用 在HTML5中重新提供了一种 ... -
HTML5 多媒体播放【3】
2011-10-23 10:45 1209video元素和audio元素的方法 play()方法:使 ... -
HTML5 多媒体播放【2】
2011-10-22 21:14 1714音频和视频元素的属性 这两种元素所具有的属性大致相同,介绍如 ... -
HTML5 多媒体播放【1】
2011-10-21 18:58 892video与audio元素基础 在HTML5中,video元 ... -
HTML5 拖放API
2011-10-17 19:43 4931在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖 ... -
HTML5 文件API
2011-10-16 18:49 4962在HTML5中,提供了一个关于文件操作的文件API,通过使用这 ...
相关推荐
html5 canvas绘制七巧板图形代码 html5 canvas绘制七巧板图形代码
html5 canvas涂鸦画板绘制图形效果
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
HTML5 canvas自由绘制图形工具,可拖拽的自由绘图画板。 ·
应用html5画布功能以及脚本语言js在网页上绘制图表并标注
HTML5绘制变形图形2.pdf 学习资料 复习资料 教学资源
根据用户数据表格html5绘制饼状图形代码 根据用户数据表格html5绘制饼状图形代码 根据用户数据表格html5绘制饼状图形代码
HTML5绘制变形图形2案例.pdf 学习资料 复习资料 教学资源
html5 canvas自定义绘制多边图形代码 html5 canvas自定义绘制多边图形代码
html5绘图效果简单绘制图形线条类似百度贴吧涂鸦效果
html5 canvas实现的绘图工具自由绘制图形画板源码.zip
html5 canvas实现的绘图工具自由绘制图形画板源码 有很多功能
HTML5绘制变形图形3.pdf 学习资料 复习资料 教学资源
Html5绘制小型太阳系模型
这是一款基于html5绘制的用户数据表格与饼状图形效果源码,左侧展示用户的数据表格,右侧展示对应的饼状图,该表格图形完全采用HTML5绘制,没有采用任何外部图形元素,是一款非常经典的HTML5图表效果源码。...
HTML5 canvas自由绘制图形工具,可拖拽的自由绘图画板。
XCalc是一款基于HTML5的数学函数图形绘制插件,这款函数图形绘制插件不仅可以绘制简单的加减乘除运算的函数图形,也可以绘制乘方运算和正弦余弦运算的函数图形。XCalc的配置也非常简单,在HTML5图表中应用十分广泛。
实现流程图绘制、拓扑图等自定义绘制功能,具有丰富的的图形选择。
html5 canvas绘制几何图形3d动画特效源码.zip