- 浏览: 308628 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
开发小菜:
支持IE9以下的吗?
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使:
开发Html5必须得下载么,我用dw编写,把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼:
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo:
你好,我想问下,导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX:
下载学习,初学者膜拜一下。
html5 实现动画(三)
绘制图形
不像 SVG,canvas 只支持一种基本形状——矩形,所以其它形状都是有一个或多个路径组合而成。还好,有一组路径绘制函数让我们可以绘制相当复杂的形状。
矩形 Rectangles
我们首先看看矩形吧,有三个函数用于绘制矩形的:
fillRect(x,y,width,height) : Draws a filled rectangle
strokeRect(x,y,width,height) : Draws a rectangular outline
clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent
它们都接受四个参数, x 和 y 指定矩形左上角(相对于原点)的位置,width 和 height 是矩形的宽和高。好,实战一下吧。
下面就是上页模板里的 draw() 函数,但添加了上面的三个函数。
绘制矩形的例子 Rectangular shape example
function draw(){
var canvas = document.getElementByIdx_x('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
出来的结果应该和右边的是一样的。fillRect 函数画了一个大的黑色矩形(100x100),clearRect 函数清空了中间 60x60 大小的方块,然后strokeRect 函数又在清空了的空间内勾勒出一个 50x50 的矩形边框。在接下去的页面里,我们会看到和 clearRect 函数差不多另外两个方法,以及如何去改变图形的填充和边框颜色。
与下一节的路径函数不一样,这三个函数的效果会立刻在 canvas 上反映出来。
绘制路径 Drawing paths
不像画矩形那样的直截了当,绘制路径是需要一些额外的步骤的。
beginPath()
closePath()
stroke()
fill()
第一步是用 beginPath 创建一个路径。在内存里,路径是以一组子路径(直线,弧线等)的形式储存的,它们共同构成一个图形。每次调用 beginPath,子路径组都会被重置,然后可以绘制新的图形。
第二步就是实际绘制路径的部分,很快我们就会看到。
第三步是调用 closePath 方法,它会尝试用直线连接当前端点与起始端点来关闭路径,但如果图形已经关闭或者只有一个点,它会什么都不做。这一步不是必须的。
最后一步是调用 stroke 或 fill 方法,这时,图形才是实际的绘制到 canvas 上去。stroke 是绘制图形的边框,fill 会用填充出一个实心图形。
注意:当调用 fill 时,开放的路径会自动闭合,而无须调用 closePath 。
画一个简单图形(如三角形)的代码如下。
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
moveTo
moveTo 是一个十分有用的方法,虽然并不能用它来画什么,但却是绘制路径的实用方法的一部分。你可以把它想象成是把笔提起,并从一个点移动到另一个点的过程。
moveTo(x, y)
它接受 x 和 y (新的坐标位置)作为参数。
当 canvas 初始化或者调用 beginPath 的时候,起始坐标设置就是原点(0,0)。大多数情况下,我们用 moveTo 方法将起始坐标移至其它地方,或者用于绘制不连续的路径。看看右边的笑脸,红线就是使用 moveTo 移动的轨迹。
试一试下面的代码,粘贴到之前用过的 draw 函数内在看看效果吧。
moveTo 的使用示例
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
//thegoneheart 完整例子
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
ctx.beginPath();
ctx.moveTo(40,75);
ctx.lineTo(60,65);
ctx.lineTo(90,65);
ctx.moveTo(110,75);
ctx.lineTo(125,75);
ctx.stroke();
注意:你可以注释 moveTo 方法来观察那些连接起来的线。
注意:arc 方法的用法见下面。
绘制各种线条 Lines
我们用 lineTo 方法来画直线。
lineTo(x, y)
lineTo 方法接受终点的坐标(x,y)作为参数。起始坐标取决于前一路径,前一路径的终点即当前路径的起点,起始坐标也可以通过 moveTo 方法来设置。
lineTo 的使用示例
示例(如右图)画的是两个三角形,一个实色填充,一个勾边。首先调用beginPath 方法创建一个新路径,然后用moveTo 方法将起始坐标移至想要的位置,然后画两条直线来构成三角形的两条边。
可以注意到 fill 和 strok 绘三角形的区别,上面也提到过,使用 fill 路径会自动闭合,但使用 stroke 不会,如果不关闭路径,勾画出来的只有两边。
观看示例
// 填充三角形
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
// 勾边三角形
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
弧线 Arcs
我们用 arc 方法来绘制弧线或圆。标准说明中还包含 arcTo 方法,当前 Safari 是支持的,但基于 Gecko 的浏览器还未实现。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
方法接受五个参数:x,y 是圆心坐标,radius 是半径,startAngle 和 endAngle 分别是起末弧度(以 x 轴为基准),anticlockwise 为 true 表示逆时针,反之顺时针。
警告:在 Firefox 的 beta 版本里,最后一个参数是 clockwise,而最终版本不是。因此如果是从 beta 升级至发行版需要做相应修改。
注意:arc 方法里用到的角度是以弧度为单位而不是度。度和弧度直接的转换可以用这个表达式:var radians = (Math.PI/180)*degrees;。
arc 的使用示例
这个示例比之前见到过的要复杂一些,画了12个不同的弧形,有不同夹角和填充状态的。如果我用上面画笑脸的方式来画这些弧形,那会是一大段的代码,而且,画每一个弧形时我都需要知道其圆心位置。像我这里画 90,180 和 270 度的弧形看起来不是很麻烦,但是如果图形更复杂一些,则实现起来会越来越困难。
这里使用两个 for 循环来画多行多列的弧形。每一个弧形都用 beginPath 方法创建一个新路径。然后为了方便阅读和理解,我把所有参数都写成变量形式。显而易见,x 和 y 作为圆心坐标。 radius 和 startAngle 都是固定,endAngle 从 180 度半圆开始,以 90 度方式递增至圆。anticlockwise则取决于奇偶行数。最后,通过 if 语句判断使前两行表现为勾边,而后两行为填充效果。
观看示例
for (i=0;i<4;i++){
for(j=0;j<3;j++){ //chinese_xu 原始代码
ctx.beginPath();
var x = 25+j*50; // x coordinate
var y = 25+i*50; // y coordinate
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI+(Math.PI*j)/2 ; // End point on circle
var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise
ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
if (i>1){
ctx.fill();
} else {
ctx.stroke();
}
}
}
//chinese_xu 原始代码并没有按照1/4圆递增来画。
//修改后输出4行4列,要把画布扩大到200*200观看
for (i=0;i<4;i++){
for(j=0;j<4;j++){
ctx.beginPath();
var x = 25+j*50; // x coordinate
var y = 25+i*50; // y coordinate
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI*(2-j/2); // End point on circle
var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise
ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
if (i>1){
ctx.fill();
} else {
ctx.stroke();
}
}
}
贝塞尔和二次方曲线 Bezier and quadratic curves
接下来要介绍的路径是 贝塞尔曲线 ,它可以是二次和三次方的形式,一般用于绘制复杂而有规律的形状。
quadraticCurveTo(cp1x, cp1y, x, y) // BROKEN in Firefox 1.5 (see work around below)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
上面两行代码的区别见右图。它们都有一个起点一个终点(图中的蓝点),但二次方贝塞尔曲线只有一个(红色)控制点点)而三次方贝塞尔曲线有两个。
参数 x 和 y 是终点坐标,cp1x 和 cp1y 是第一个控制点的坐标,cp2x 和cp2y 是第二个的。
使用二次方和三次方的贝塞尔曲线是相当有挑战的,因为不像在矢量绘图软件 Adobe Illustrator 里那样有即时的视觉反馈。因为用它来画复杂图形是比较麻烦的。但如果你有时间,并且最重要是有耐心,再复杂的图形都可以绘制出来的。下面我们来画一个简单而又规律的图形。
这些例子都比较简单。我们绘制的都是完整的图形。
quadraticCurveTo 的使用示例
查看示例
// Quadratric curves example
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
通过计算,可以由二次曲线的单个控制点得出相应三次方曲线的两个控制点,因此二次方转三次方是可能的,但是反之不然。仅当三次方程中的三次项为零是才可能转换为二次的贝塞尔曲线。通常地可以用多条二次方曲线通过细分算法来近似模拟三次方贝塞尔曲线。
bezierCurveTo 的使用示例
查看示例
// Bezier curves example
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
Firefox 1.5 quadraticCurveTo() bug 的应对方案
在 Firefox 1.5 里,quadatricCurveTo() 的实现是有 bug 的,它不是直接绘制二次方曲线,而是调用 bezierCurveTo() ,其中两个控制点都是二次方曲线的那个单控制点。因此,它会绘制出不正确的曲线。如果必须使用到 quadraticCurveTo(),你需要自行去将二次方曲线转换成三次方的,这样就可以用 bezierCurveTo() 方法了。
矩形路径 Rectangles
除了上面提到的三个方法可以直接绘制矩形之外,我们还有一个 rect 方法是用于绘制矩形路径的。
rect(x, y, width, height)
它接受四个参数,x 和 y 是其左上角坐标,width 和 height 是其宽和高。
当它被调用时,moveTo 方法会自动被调用,参数为(0,0),于是起始坐标又恢复成初始原点了。
综合 Making combinations
上面所用到的例子都只用到了一种类型的路径,当然 canvas 不会限制所使用的路径类型的多少。所以,我们来看一个路径大杂烩。
综合样例
在整个例子里,最值得注意的是 roundedRect 函数的使用和 fillStyle 属性的设置。自定义函数对于封装复杂图形的绘制是非常有用的。在这个例子里使用自定义函数就省掉了大约一半的代码。
在接下来的例子里会深入探讨 fillStyle 属性的使用。这里是用它来改变填充颜色,从默认的黑色,到白色,然后再回到黑色。
查看示例
function draw() {
var ctx = document.getElementByIdx_x('canvas').getContext('2d');
roundedRect(ctx,12,12,150,150,15);
roundedRect(ctx,19,19,150,150,9);
roundedRect(ctx,53,53,49,33,10);
roundedRect(ctx,53,119,49,16,6);
roundedRect(ctx,135,53,49,33,10);
roundedRect(ctx,135,119,25,49,10);
ctx.beginPath();
ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false); //chiensexu 本来是true呵呵,反了
ctx.lineTo(31,37);
ctx.fill();
for(i=0;i<8;i++){
ctx.fillRect(51+i*16,35,4,4);
}
for(i=0;i<6;i++){
ctx.fillRect(115,51+i*16,4,4);
}
for(i=0;i<8;i++){
ctx.fillRect(51+i*16,99,4,4);
}
ctx.beginPath();
ctx.moveTo(83,116);
ctx.lineTo(83,102);
ctx.bezierCurveTo(83,94,89,88,97,88);
ctx.bezierCurveTo(105,88,111,94,111,102);
ctx.lineTo(111,116);
ctx.lineTo(106.333,111.333);
ctx.lineTo(101.666,116);
ctx.lineTo(97,111.333);
ctx.lineTo(92.333,116);
ctx.lineTo(87.666,111.333);
ctx.lineTo(83,116);
ctx.fill();
ctx.fillStyle = "white";
ctx.beginPath();
ctx.moveTo(91,96);
ctx.bezierCurveTo(88,96,87,99,87,101);
ctx.bezierCurveTo(87,103,88,106,91,106);
ctx.bezierCurveTo(94,106,95,103,95,101);
ctx.bezierCurveTo(95,99,94,96,91,96);
ctx.moveTo(103,96);
ctx.bezierCurveTo(100,96,99,99,99,101);
ctx.bezierCurveTo(99,103,100,106,103,106);
ctx.bezierCurveTo(106,106,107,103,107,101);
ctx.bezierCurveTo(107,99,106,96,103,96);
ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(101,102,2,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(89,102,2,0,Math.PI*2,true);
ctx.fill();
}
function roundedRect(ctx,x,y,width,height,radius){
ctx.beginPath();
ctx.moveTo(x,y+radius);
ctx.lineTo(x,y+height-radius);
ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
ctx.lineTo(x+width-radius,y+height);
ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
ctx.lineTo(x+width,y+radius);
ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
ctx.lineTo(x+radius,y);
ctx.quadraticCurveTo(x,y,x,y+radius);
ctx.stroke();
}
发表评论
-
iframe 高度自适应
2011-11-03 17:07 1364转自:http://apps.hi.baidu.com/sha ... -
WordPress 博客添加新浪微博挂件:
2011-06-22 14:07 14721.点击链接http://t.sina ... -
HTML5 影音 ( Video ) 概論
2011-05-25 16:25 10541 Video介紹 引用我翻譯文檔《在HTML5頁面 ... -
HTML5 Audio Loops
2011-05-19 16:49 1286One of the neatest things abo ... -
处理火狐自动播放视频
2011-05-18 17:54 1445版权声明:转载时请 ... -
教你用HTML5开发iPhone应用程序
2011-05-13 17:38 1184你一整年都像现在一样沮丧,这我知道。所有铁杆Objecti ... -
很给力,20个HTML5视频播放器及代码
2011-05-09 14:45 1973本文来源: http://www.uleadesi ... -
HTML 5 Video概述
2011-05-09 13:32 1016本文来自:http://www.xlnv.ne ... -
支持移动平台的Html5播放器
2011-05-09 13:25 2905本文转自:http://www.riameeting ... -
HTML5 API简介一(Canvas,Audio/Video,Geolocation)
2011-05-09 13:22 1561本文来自:http://www.myext.cn/web ... -
HTML5资源
2011-05-09 11:56 1217JS APIs: 选择器 W3C草案:Selecto ... -
HTML5 Audio/Video 标签,属性,方法,事件
2011-05-09 11:53 1422本文转自:http://directguo.com/blo ... -
DIV实现隐藏与显示
2011-05-06 15:23 752css中display属性的参考值: display:n ... -
HTML5+CSS3+JQuery打造自定义视频播放器
2011-05-06 12:57 6727简介HTML5的<video> ... -
HTML 5 <video> preload 属性
2011-05-06 12:54 1144设置为预加载的 video 元素: <vide ... -
HTML5 – Video
2011-05-06 12:51 1046在HTML5以前若我們要在網頁中播放影片時,需要使用Act ... -
超過 23 個開源的 HTML5 影音播放器與框架
2011-05-06 12:03 7524超過 23 個開源的 HTML5 影音播放器與框架 - ... -
Building a better HTML5 video player with Glow
2011-05-06 11:51 1074Last year I wrote a post (Bu ... -
Ambilight для тэга video
2011-05-06 11:49 775В некоторых топовых моделях т ... -
怎样用js+html5实现视频的播放控制
2011-05-06 11:46 1407html5 代码: <video width ...
相关推荐
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制。七巧板是一种古老的益智玩具,由七个不同形状的板组成,可以拼出各种图案。在HTML5 Canvas上绘制七巧板图形,可以结合数学、编程和...
"html5 canvas涂鸦画板绘制图形效果"这一主题涵盖了Canvas的基本用法、图形绘制方法以及如何实现一个涂鸦画板功能。 1. **Canvas基本概念**: HTML5 Canvas是一个基于矢量图形的画布元素,通过JavaScript API提供...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的视觉效果。这个技术尤其适合创建几何图形动画特效,给用户带来互动且引人入胜的体验。以下是对HTML5 Canvas绘制几何...
这个"HTML5 canvas自由绘制图形工具.zip"文件显然包含了一个实现用户可以在画板上自由绘制图形的应用。这个应用利用JavaScript(JS)的API来控制canvas元素,允许用户进行拖拽、绘制和编辑图形。 在HTML5中,`...
应用html5画布功能以及脚本语言js在网页上绘制图表并标注
首先,我们来看"vue+canvas绘制图形"这个主题。Vue组件是Vue.js的核心特性之一,它允许我们将UI拆分成独立、可复用的部分。在这个项目中,我们可以创建一个名为`Canvas.vue`的Vue组件,专门负责处理Canvas元素。在`...
在这个"HTML5绘制体温单图例"的项目中,前端开发者利用JavaScript(js)来根据数据配置动态生成体温图表,这涉及到一系列的技术和算法。 首先,Canvas API是HTML5中的一个核心组成部分,它提供了一组JavaScript方法...
HTML5引入了Canvas API,这是一个基于标签的二维绘图上下文,允许开发者直接在浏览器中绘制图形。Canvas提供了丰富的绘图方法,如`fillRect()`, `strokeRect()`, `arc()`, `lineTo()`, `beginPath()`等,可以用来...
总的来说,根据用户数据表格使用HTML5绘制饼状图的过程涉及HTML5的`<canvas>`元素、JavaScript的数据处理、图形绘制算法以及选择合适的库(如D3.js或Chart.js)。通过熟练掌握这些技术,开发者可以创建出互动性强、...
- **Canvas**:HTML5的Canvas是一块可以动态绘制图形的画布,通过JavaScript API,开发者可以直接在画布上绘制线条、形状、图像等。Canvas适合动态、数据驱动的图形绘制,例如图表、游戏场景等。 - **SVG...
HTML5的Canvas元素是网页动态图形绘制的重要工具,它允许开发者通过JavaScript代码在网页上创建出丰富的、交互式的2D图形。在这个主题中,“Html利用Canvas绘制图形”涵盖了多种形状的绘制方法,包括基础形状和复杂...
html5 canvas实现的绘图工具自由绘制图形画板源码 有很多功能
然而,HTML本身并不支持直接绘制图形,这时就需要借助Canvas元素。Canvas是一个基于矢量图形的画布,我们可以使用JavaScript来控制它的每一像素,从而实现复杂的图形绘制和动画效果。 Canvas通过JavaScript API提供...
在提供的"HTML5绘制变形图形2案例.pdf"学习资料中,主要涉及了三个关键知识点:坐标变换、平移效果和缩放效果。 1. **坐标变换**: 在案例1中,展示了如何利用`context.translate()`方法改变画布的坐标系。默认...
在这个“HTML5应用开发技术-canvas绘制图形、图像与文字”的主题中,我们将深入探讨Canvas API的使用。 首先,Canvas API提供了一系列的方法来绘制图形。在案例中,可以看到如何在画布中心绘制文字。首先,通过`...
Canvas 提供了一个二维绘图环境,可以用来绘制图形、动画,甚至处理图像。在Canvas上绘制多边形是常见的需求,尤其在创建自定义图形、游戏或者数据可视化时。本篇文章将深入探讨如何使用HTML5 Canvas自定义绘制多边...
Canvas提供了各种方法和属性,如`fillRect()`(填充矩形)、`beginPath()`(开始路径)和`stroke()`(描边)等,用于绘制图形。 2. Canvas API - `getContext()`: 这个方法用于获取Canvas的绘图环境,通常返回一个...
这是一款基于html5 canvas实现的绘图工具自由绘制图形画板源码,具备画板基本的线、矩形、铅笔、圆、五角星等绘图工具,及颜色与边框的填充,橡皮擦等功能。绘图完毕还具有保存图片的功能。是一款非常实用的经典...
总的来说,“html5绘制坦克”项目涉及HTML5的Canvas API,JavaScript编程,键盘事件监听,以及基本的2D图形绘制和动画原理。通过这个项目,你可以深入学习Web前端开发中的图形处理技术,同时提升对交互式应用的理解...