html5 绘图 - html5 详细教程
html5 绘图
版本:HTML5
HTML5 中最让人兴奋的特性是 canvas — 那个用来作画的东东。在你的页面中插入 canvas 就像插入其他标记一样平常,但你将需要一些编程 的经验来绘制形状、图表、动画、游戏、图片作品等
HTML5标签用于绘制图像(通过脚本,通常是 JavaScript)。不过,
元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。
getContext()
方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
创建一个画布,一个画布在网页中是一个矩形框,通过元素来绘制。默认情况下 元素没有边框和内容。标签通常需要指定一个
id
属性 (脚本中经常引用),width
和height属性定义的画布的大小,使用style
属性来添加边框。你可以在HTML页面中使用多个元素
HTML
JS
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);
效果
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。设置 fillStyle 属性可以是CSS颜色,渐变,或图案。fillStyle默认设置是#000000(黑色)。fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
canvas 的历史
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的 东西都绘制到一块画布上。
canvas 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 canvas 标记。
我们甚至可以在 IE 中使用 canvas 标记,并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码(由 Google 发起)来构建兼容性的画布。
canvas 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进,目前 canvas 已经成为 HTML 5 草案中一个正式的标签。
canvas 标记和 SVG 以及 VML 之间的差异
canvas 标记和 SVG 以及 VML 之间的一个重要的不同是,canvas 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。
这两种方式在功能上是等同的,任何一种都可以用另一种来模拟。从表面上看,它们很不相同,可是,每一种都有强项和弱点。例如,SVG 绘图很容 易编辑,只要从其描述中移除元素就行。
要从同一图形的一个 canvas 标记中移除元素,往往需要擦掉绘图重新绘制它。
使用 canvas 标记绘制简单图形
大多数 Canvas 绘图 API 都没有定义在 canvas 元素本身上,而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。
Canvas API 也使用了路径的表示法。但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,比如调用 beginPath() 和 arc() 方法。
一旦定义了路径,其他的方法,如 fill(),都是对此路径操作。绘图环境的各种属性,比如 fillStyle,说明了这些操作如何使用。
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 标签的属性及方法。 | ||||
注意:Internet Explorer 8 及更早的IE版本不支持 元素。 |
canvas API
方法 / 属性 | 使用方法 | 描述 |
getContext() | var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); | 获取绘制环境 返回一个用于在画布上绘图的环境。 |
save() | ctx.save(); | 绘制状态 保存路径 |
restore() | ctx.restore(); | 绘制状态 恢复路径 |
scale() | ctx.scale(x, y); //x轴缩放比例|y轴缩放比例 | 转换 缩放 |
rotate() | ctx.rotage(radian); //radian 弧度=角度*Math.PI/180 | 转换 旋转角度 |
translate() | ctx.translate(x, y); //x轴的位移|Y轴的位移 | 转换 偏移 |
transform() | ctx.transform(a, b, c, d, e, f); | 转换 变换 |
setTransform() | ctx.setTransform(a, b, c, d, e, f); | 转换 设置变换 |
globalAlpha | ctx.globalAlpha = 0.8; | 转换 透明度 |
globalCompositeOperation | ctx.globalCompositeOperation = ""; | 转换 透明度 |
fillStyle | ctx.fillStyle = "#ff0000"; | 颜色和边框 设置绘图的背景颜色 |
strokeStyle | ctx.strokeStyle = "blue"; | 颜色和边框 在绘制的图形上添加边框颜色 |
addColorStop() | ctx.addColorStop(offset, color) //offset 位置|color 颜色值 | 颜色和边框 在绘制的图形上添加边框颜色 |
createLinearGradient() | ctx.createLinearGradient(x,y,w,h); //x轴位置|y轴位置|渐变宽度|渐变高度 | 颜色和边框 创建一个渐变 |
createRadialGradient() | ctx. createRadialGradient (x0, y0, r0, x1, y1, r1); | 颜色和边框 在绘制的图形上添加边框颜色 |
createPattern() | ctx.createPattern (img, repeatition); //img 图片对象 //repeatition 平铺方式 | 颜色和边框 在绘制的图形上添加边框颜色 |
lineWidth | ctx.lineWidth = 10; | 边界 设置绘制的图形边框 |
lineJoin | ctx.lineJoin = "round"; //3种格式miter|round|bevel //默认|圆角|斜角 | 边界 设置绘制的图形的辩解样式 |
lineCap | ctx.lineCap = "round"; //3种格式 butt|round|square //默认|圆角|高度多出线宽的一半 | 边界 设置绘制的图形的辩解样式 |
miterLimit | ctx.miterLimit = ""; | 边界 边框斜切限制 |
shadowColor | ctx.shadowColor = "red"; | 投影 投影颜色 |
shadowOffsetX | ctx.shadowOffsetX = 10; | 投影 投影的水平位移 |
shadowOffsetY | ctx.shadowOffsetY = 10; | 投影 投影的垂直位移 |
shadowBlur | ctx.shadowBlur = 10; | 投影 投影的模糊大小 |
fillRect() | ctx.fillRect(x,y,w,h); | 绘制矩形 在画布上填充黑色背景 |
strokeRect() | ctx.strokeRect(x,y,w,h); | 绘制矩形 在画布上绘制一个带边框的矩形 |
clearRect() | ctx.clearRect(x,y,w,h); | 绘制矩形 清除指定范围内的内容 |
beginPath() | function draw(){ beginPath(); closePath(); } | 绘制路径 开始绘制一个新的路径,避免与后面绘制的路径重叠,在填充或者话边框的时候就会出现问题。 在绘制好路径之后用closePath() 来关闭路径;如果在填充路径时没有关闭,那么context就会自动调用closePath关闭路径。 |
closePath() | 代码同上 | 绘制路径 关闭路径,如果不设置最后一个点,则默认以第一个点结束。 |
moveTo() | ctx.moveTo(120, 120);//x, y | 绘制路径 移动到绘制的新目标点,设置一个新的点 |
lineTo() | ctx.lineTo(220, 320);//x, y | 绘制路径 新的目标点 |
quadraticCurveTo() | ctx.quadraticCurveTo (cpx, cpy, x, y); //贝赛尔曲线 控制点|坐标点 | 绘制路径 新的目标点 |
bezierCurveTo() | ctx. bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y); //贝赛尔曲线 控制点|控制点|坐标点 | 绘制路径 新的目标点 |
arc() | ctx.arc(x, y, r, s, e, d); //x,y,半径,起始弧度,结束弧度,旋转方向 //旋转方向:false[顺时针],true[逆时针] | 绘制路径 画一个圆 |
arcTo() | ctx.arc(x1, y1, x2, y2, r); //第一组坐标|第二组坐标|半径 | 绘制路径 画一个圆 |
rect() | ctx.rect(); //x,y,w,h | 绘制路径 绘制一个矩形 |
fill() | ctx.fill(); //填充,默认黑色 | 绘制路径 把lineTO()设置的点区域用默认颜色填充成一个图形 |
stroke() | ctx.stroke(); //画线,默认黑色 | 绘制路径 把lineTO()设置的点连接起来 |
clip() | ctx.clip(); | 绘制路径 |
isPointInPath() | ctx.isPointInPath(); | 绘制路径 |
drawFocusRing() | ctx.drawFocusRing (ele, canDrawCustom); | 集中管理 |
setCaretSelectionRect() | ctx.setCaretSelectionRect (ele, x, y, w, h); | 插入符和选择器管理 |
caretBlinkRate() | ctx.caretBlinkRate() | 插入符和选择器管理 |
font | ctx.font="" | 文本 设置字体类型 |
textAlign = "" | ctx.textAlign = "" //start, end, left, right, center //def:start | 文本 文本对齐方式 |
textBaseline | ctx.textBaseline="" //def:alphabetic | 文本 |
fillText() | ctx.fillText (text, x, y[, maxWidth ]) | 文本 设置填充的文本 |
strokeText() | ctx.strokeText (text, x, y[, maxWidth ]) | 文本 |
measureText() | var metrics = ctx.measureText(text); metrics . width | 文本 |
drawImage() | drawImage(image,dx,dy) drawImage(image,dx,dy,dw,dh) drawImage(image,sx,sy,sw,sh, dx,dy,dw,dh) | 图片操作 在画布上载入一张图片 |
createImageData() | createImageData(sw,sh) | 图片操作 |
createImageData() | createImageData(imageData) | 图片操作 |
getImageData() | var imageData = createImageData(sx,sy,sw,sh) imageData.width imageData.height imageData.data | 图片操作 |
putImageData() | putImageData(imageData,dx,dy[, dirtyX,dirtyY,dirtyWidth, dirtyHeight]) | 图片操作 |
绘制模型 |
Canvas - 路径
在Canvas上画线,我们将使用以下两种方法:
- moveTo(x,y) 定义线条开始坐标
- lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 "ink" 的方法,就像stroke()。
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();
定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条
Canvas - 文本
使用 canvas 绘制文本,重要的属性和方法如下:
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
使用 fillText():
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);
使用 "Arial" 字体在画布上绘制一个高 30px 的文字(实心)
Canvas - 渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变:
- createLinearGradient(x,y,x1,y1) - 创建线条渐变
- createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
- addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1
使用渐变,设置fillStyle或strokeStyle的值为渐变,然后绘制形状,如矩形,文本,或一条线。
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
创建了一个线性渐变,使用渐变填充矩形
Canvas - 图像
把一幅图像放置到画布上, 使用drawImage(image,x,y)方法
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);
把一幅图像放置到了画布上
SVG 与 Canvas两者间的区别
- SVG 是一种使用 XML 描述 2D 图形的语言。Canvas 通过 JavaScript 来绘制 2D 图形。
- SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
- Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!