- 浏览: 308584 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
开发小菜:
支持IE9以下的吗?
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使:
开发Html5必须得下载么,我用dw编写,把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼:
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo:
你好,我想问下,导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX:
下载学习,初学者膜拜一下。
html5 实现动画(三)
HTML5边玩边学(2)基础绘图实现方法
来源:互联网 作者:佚名 时间:09-21 20:12:23 【大 中 小】
点评:在前一篇博客中,我们测试了 canvas 标签的用法,并得到了 canvas 标签的渲染上下文对象, 但是并没有用它绘制任何图形。在这一篇中,我们先了解一下HTML5绘图的一些基础概念,然后再来画几个图形玩玩。
一、坐标系
其实只要玩过一点点图形编程的人都知道,电脑上的坐标系和数学上的坐标系稍微有点不同,坐标的原点在绘制区域(这里是Canvas)的左上角,X轴正向朝右,Y轴正向朝下,如下图
声明:为本文为原创文章,作者保留所有权利!欢迎转载,转载请注明作者左洸和出处博客园
二、Stroke 和 Fill
HTML5中将图形分为两大类:
第一类称作 Stroke,我的理解就是轮廓、勾勒或者线条,总之,图形是由线条组成的;
第二类称作 Fill,就是填充区域
上下文对象中有两个绘制矩形的方法,可以让我们很好的理解这两大类图形的区别:
一个是 strokeRect,还有一个是 fillRect
下面的代码分别用这两个方法来绘制矩形,你可以分别点击两个按钮来看看有什么不同,从而理解 stroke 和 fill 的区别
设置画布
复制代码
代码如下:
<canvas id="test1" width="200" height="200" style=" background-color: grey">你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
<input type="button" value="strokeRect" onclick="strokeRect();"/>
<input type="button" value="fillRect" onclick="fillRect();"/>
strokeRect 和 fillRect
复制代码
代码如下:
function strokeRect(){
var canvas = document.getElementById('test1');
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,200,200);
ctx.strokeStyle="blue";
ctx.strokeRect(10,10,180,180);
}
function fillRect(){
var canvas = document.getElementById('test1');
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,200,200);
ctx.fillStyle="blue";
ctx.fillRect(10,10,180,180);
}
你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
三、颜色
上下文对象有两个属性可以用来设置颜色:strokeStyle 和 fillStyle
strokeStyle 的值决定了你当前要绘制的线条的颜色
fillStyle 的值决定了你当前要填充的区域的颜色
颜色值应该是符合CSS3 颜色值标准的有效字符串。下面的例子都表示同一种颜色。
//这些 fillStyle 的值均为 '橙色',ctx 是上下文对象
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
关于颜色,以后会有更多的说明。
四、基本绘图
除了上面给出的两个绘制矩形的方法外,上下文对象还有几个方法可以用来绘制一些基本图形,如下:
moveTo(x,y):moveTo方法并不能画出任何东西,它只是将画笔的当前点移动到(x,y)处
lineTo(x,y):从当前点到(x,y)点绘制一条直线。注意:绘制完成后,当前点就变成了(x,y),除非你用 moveTo 方法去改变他
arc(x, y, radius, startAngle, endAngle, anticlockwise) :绘制一条弧线
quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) :这两个方法都是绘制贝叶斯曲线,具体用法看参考手册
rect(x, y, width, height) :绘制一个矩形。注意: 当它被调用时,moveTo 方法会自动被调用,参数为(0,0),于是起始坐标又恢复成初始原点了。
有了直线、弧线、曲线、方形和圆形这几种基本图形,我们就可以组合出更复杂的图形了
五、理解绘制路径 Drawing Path
上一篇文章中说过,我们绘制的图形是先绘制到一个抽象的上下文对象中(其实就是内存中),然后再将上下文对象输出到显示设备上,这个输出到显示设备的过程不需要我们操心。但是有时候我们并不想立刻输出每一次绘制动作,也许我想让一组绘制动作完成以后,再集中一块输出, 比如一个围棋棋盘有19×19条直线组成,正常情况下需要向想显示设备输出19×19次,但是如果我们先暂停向显示设备输出,等在上下文中(内存中)全部绘制完成19×19条直线时,再向显示设备输出,只需要输出一次就可以了。
这种情况在HTML5中叫做绘制路径,它由几个上下文对象的方法组成:
beginPath() :开始路径,意思就是在你调用这个方法后,你绘制的图形就不会再向屏幕输出了,而只是画到了上下文对象中(内存中)
stroke() :将你调用 beginPath 方法以后绘制的所有线条,一次性输出到显示设备上
closePath() :如果你调用 beginPath 方法以后,在上下文对象中进行了一系列的绘制,但是得到的图形是不闭合的,这个方法将会帮你补上最后一条直线,将你的图形闭合起来。
注意:closePath并不向屏幕输出图形,而只是在上下文对象中补上一条线,这个步骤不是必需的。
fill() :
如果你的绘制路径组成的图形是封闭的,这个方法将用 fillStyle 设置的颜色填充图形,然后立即向屏幕输出;
如果绘制路径不是封闭的,这个方法会先将图形闭合起来,然后再填充输出。
注意:所有的 fill 图形,如 fillRect 等,都是立刻向屏幕输出的,他们没有绘制路径这个概念
下面的代码将绘制一个简单的填充三角形。
注意:绘制三角形的时候,默认的背景色为白色,默认的前景色为黑色。
设置画布
复制代码
代码如下:
<canvas id="test2" width="200" height="200" style="border:1px solid #c3c3c3;">你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
<input type="button" value="画三角" onclick="drawTri();"/>
<input type="button" value="清除" onclick="clearTri();"/>
绘制三角形
复制代码
代码如下:
<script type="text/javascript">
function drawTri(){
var canvas = document.getElementById('test2');
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
function clearTri(){
var canvas = document.getElementById('test2');
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,200,200);
}
</script>
你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
六、半个单位的坐标
里还要回过头来说说坐标,下面的代码是在画布上绘制网格,点击“画网格”按钮可以看见效果
设置画布
复制代码
代码如下:
<canvas id="test2" width="200" height="200" style="border:1px solid #c3c3c3;">你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
<input type="button" value="画三角" onclick="drawTri();"/>
<input type="button" value="清除" onclick="clearTri();"/>
绘制三角形
复制代码
代码如下:
<script type="text/javascript">
function drawTri(){
var canvas = document.getElementById('test2');
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
function clearTri(){
var canvas = document.getElementById('test2');
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,200,200);
}
</script>
你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
这段代码中,有一处奇怪的地方,就是坐标循环是从0.5开始的,这是为什么呢?
如下图,假如我想绘制一条从(1,0)到(1,3)的线,由于线的默认宽度是一个像素,所以在我想象中应该绘制成深绿色的部分,即在坐标 1 两边各占半个像素的宽度。
然而,浏览器的最小单位是一个像素,所以他会向两边扩展,实际绘制出来的浅绿色的部分,即占用了两个像素的宽度。这样,我们绘制的线条在坐标上就不精确了
如下图,如果我们给出的起始坐标是(1.5,0)和(1.5,3),那么线条的宽度才是正确的一个像素。
七、清空画布
上面给出的两段代码中,我们都用到了清空画布,用到的方法如下:
clearRect(x,y,width,height):
它接受四个参数, x 和 y 指定矩形左上角(相对于原点)的位置,width 和 height 是矩形的宽和高。调用该方法会将给出的矩形区域中所有绘制图形都清空,露出画布的背景
发表评论
-
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 1560本文来自: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 ...
相关推荐
原生JS使用Canvas实现拖拽式绘图功能的知识点涵盖了Canvas API的基础应用、面向对象编程思想在Canvas绘图中的运用以及鼠标事件的处理,以下是详细解析: 1. Canvas API基础知识 - Canvas元素:HTML5新增的Canvas...
这个“HTML5绘图源代码”可能包含了以上各种绘图示例,包括基础形状、渐变、阴影、图片处理、动画效果等,对于初学者来说,这是一个很好的学习资源。通过实际操作和修改源码,学习者能深入理解HTML5 Canvas绘图的...
这个压缩包“HTML5_canvas_Web.rar”显然包含了关于如何利用HTML5的canvas元素进行Web绘图的资源,其中的核心文件是“使用 HTML5 canvas 进行 Web 绘图.mht”。 Canvas API 提供了一系列的JavaScript方法,使得开发...
首先,JavaScript绘图的基础是HTML5的Canvas API。Canvas是一个基于矢量图形的画布,通过JavaScript可以动态地绘制和修改图形。例如,你可以使用`<canvas>`标签在HTML文档中创建一个画布,然后通过JavaScript的...
总结,HTML5 Canvas塔防游戏源码的分析涉及了Canvas的基础绘图技术、游戏开发的基本原理以及JavaScript编程技巧。通过理解并实践这个源码,开发者可以学习到如何利用HTML5技术构建复杂的游戏场景,实现动态交互,并...
这个“html5 canvas实现的绘图工具自由绘制图形画板源码.zip”文件很可能是提供了一个基于Canvas的在线绘图应用程序的源代码。接下来,我们将深入探讨HTML5 Canvas以及如何利用它来创建自定义的绘图工具。 1. **...
总之,“HTML5 Canvas绘图示例.rar”是一个很好的学习资源,涵盖了基础的Canvas绘图操作,通过实践这些例子,你可以更好地理解和掌握HTML5 Canvas的强大功能,从而在网页设计和开发中实现更多创新和动态的视觉效果。
总的来说,这个压缩包可能是对HTML5 Canvas绘图基础的一个实践教程,通过学习和理解其中的代码,开发者可以掌握如何在网页上进行动态绘图,进而构建自己的互动应用或游戏。HTML5的这些技术对于前端开发者来说非常...
本书《HTML5绘图(高清PDF)》由Steve Fulton和Jeff Fulton编写,旨在帮助读者快速掌握HTML5 Canvas的基础知识和技术要点。 #### 二、HTML5 Canvas基础 ##### 2.1 基本HTML页面结构 HTML5 Canvas的应用离不开一个...
Canvas提供了一系列绘图方法,如`fillRect()`、`strokeText()`等,通过这些方法可以实现动态图表、游戏画面等复杂视觉效果。同时,SVG(Scalable Vector Graphics)也是HTML5中的另一种矢量图形绘制方式,它更适合于...
本文将详细介绍HTML5 Canvas绘图的基本原理及其常用绘图函数的使用方法,帮助读者更好地掌握Canvas绘图技巧。 #### 1. 画矩形 在Canvas上画矩形是最基础的操作之一,主要包括三种函数: - `fillRect(x, y, width, ...
总结起来,这个“html5 canvas圆点绘图动画特效”涉及到HTML5 Canvas的基础知识,如2D渲染上下文、图形绘制方法、动画帧的处理,以及JavaScript编程技巧。通过学习和实践此类项目,开发者可以提升在网页动态图形设计...
【标题】:HTML5+JS实现俄罗斯方块 在网页上使用HTML5和JavaScript实现俄罗斯方块是一项常见的编程挑战,它涉及到多个技术层面,包括页面布局、事件处理、动画效果以及游戏逻辑。以下是对这个项目中涉及的关键知识...
### HTML5 Canvas 绘图技术详解 #### 一、引言 HTML5 Canvas 是一种用于在网页上绘制图形的技术,它通过 JavaScript 来控制画布(Canvas)元素,实现动态和交互式的图形显示。《HTML5 Canvas》这本书由 Steve ...
时钟效果的实现涉及到了JavaScript的基础知识,时间处理,以及Canvas的绘图方法。 首先,我们需要创建一个HTML页面并在其中设置一个canvas元素。在HTML5中,可以这样声明canvas: ```html <!DOCTYPE html> <html ...
2. **获取Canvas的2D绘图上下文**:通过`canvas.getContext('2d')`获取绘图上下文,它是所有绘图操作的基础。 3. **定义绘图函数**:根据用户的行为(如鼠标移动、按下和释放),编写对应的绘图函数。例如,`...
4. Canvas绘图:HTML5的元素提供了一个画布,可以进行动态图形绘制,支持JavaScript进行图形操作。 5. SVG矢量图:支持插入SVG图像,提供清晰、可缩放的矢量图形。 6. 视频和音频支持:和标签使得嵌入多媒体内容变得...
在“HTML5+JavaScript动画基础”这个主题中,我们深入探讨如何利用这两者构建引人入胜的动画效果。 首先,HTML5新增了许多元素和API,如canvas标签,它提供了一个画布,允许开发者通过JavaScript绘制图形并实现动态...