加入收藏 | 设为首页 | 会员中心 | 我要投稿 | 在线留言 | RSS
成网科技业务包括域名空间企业网站制作
 
国际域名com/net/org仅售80元/年
1G独立空间(PHP+MYSQL)仅售600元/年
您当前的位置:首页 > 网页制作 > html5

HTML5 Convas APIs方法详解

时间:2015-08-29 12:19:14  来源:互联网  作者:佚名  点击:

这篇文章主要介绍了HTML5 Convas APIs方法详解,本文罗列了Convas APIs中的大部份方法,给出这些方法的中文注释,需要的朋友可以参考下

☆ canvas.getContext('2d')73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

不可在convas中直接绘图,必须用该方法获得其二维空间绘图上 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
下文。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.beginPath()73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

表示开始新的路径绘制。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.isPointInPath(x, y)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

判断某个点是否在路径上。在坐标系被转换后该方法不适用。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.moveTo(x,y)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

相当于将画笔从画板提起,笔尖离开画板,然后再将笔尖定位在 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
(x,y)坐标处,在这个新的位置开始新的绘制。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.lineTo(x, y)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

相当于画笔笔尖不离开画板,画笔笔尖从当前坐标位置移动至 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
(x,y)坐标处,绘制一条线段。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.stroke()73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

在convas上绘图后,一些绘制操作必须调用该方法才能让绘制内 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
容显示。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.save()73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

该方法保存convas的当前状态,无论以后对convas坐任何改变, 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
只要在做这些改变前保存convas状态,以后就可以调用 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
context.restore()方法恢复到保存的这个状态。通常在一段新绘制 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
或修改操作前应该保存convas的原始状态(没有进行任何绘制或更改 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
),每次在一段新绘制或修改操作结束后在将其恢复到原始状态。这 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
样有利于以后的绘制操作。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
实际上,canvas的2d绘图环境context的许多属性和一些方法与状 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
态有关,每个属性的值被改变(或者使用某些方法改变绘图状态), 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
绘图状态就改变。若在每次改变后都保存,则一个属性的多个状态会 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
以栈(stack)的形式保存,可以依照栈的顺序多次调用restore()方 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
法来回到相应保存的状态。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.translate(x, y)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

该方法将当前坐标原点移动到(x, y)处。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.restore()73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

恢复convas状态为上一次保存的状态。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.closePath()73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

This command is very similar in behavior to the lineTo 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
function, with the difference being that the destination is 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
automatically assumed to be the 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
origination of the path. However, the closePath also informs 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
the canvas that the current shape has closed or formed a 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
completely contained area. This will be useful for future 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
fills and strokes. 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
At this point, you are free to continue with more 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
segments in your path to create additional subpaths. Or you 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
can beginPath at any time to start over and clear the path 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
list entirely.73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.fill();73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

在设置填充样式后填充闭合路径。调用该方法后不必再调用 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
context.stroke()方法。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.fillRect(x, y, width, height)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

在(x, y)处绘制并填充宽和长为(width, height)的矩形区域。调 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
用该方法后不必再调用context.stroke()方法。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.strokeRect(x, y, width, height) 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

在(x, y)处绘制宽和长为(width, height)的矩形轮廓。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.clearRect(x, y, width, height)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

清理位置(矩形的左上角)在(x, y,),大小为(width, height) 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
的矩形区域。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
Remove any content from the rectangular area and reset it 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
to its original, transparent color. 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
The ability to clear rectangles in the canvas is core to 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
creating animations and games using the HTML5 Canvas API. By 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
repeatedly drawing and clearing sections of the canvas, it 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
is possible to present the illusion of animation, and many 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
examples of this already exist on the Web. However, to 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
create animations that perform smoothly, you will need to 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
utilize clipping features and perhaps even a secondary 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
buffered canvas to minimize the flickering caused by 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
frequent canvas clears.73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.drawImage( )73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

该方法有三个重载,可将图像绘制在canvas上。图像来源可以是 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
页面中的img标记、JS中的image对象和video的一帧。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
•context.drawImage(img, x, y)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
在(x, y)处用图像img绘制图像。当canvas的大小大于图像时 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
,整个图像被绘制;当图像大于canvas时,多余的部分被裁剪。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
•context.drawImage(img, x, y, w, h)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
在(x, y)处用图像img绘制长和宽为(w, h)的矩形区域。图像 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
的大小将改变为(w, h)。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
•context.drawImage(img, imgx, imgy, imgw, imgh, cx, cy, 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
cw, ch)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
将一个img图像作为绘制对象,裁剪img上位置为(imgx, imgy 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
)大小为(imgw, imgh)的区域,绘制在canvas内位置为(cx, cy)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
处绘制大小为(cw, ch)的区域。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
如果图像上裁剪区域超出了图像范围,则会引发异常。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
•context.drawImage(video, vx, vy, vw, vh, cx, cy, cw, ch)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
将一个video对象作为绘制对象,抓取video上位置为(vx, vy 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
)大小为(vw, vh)的一帧,在canvas上位置为(cx, cy)处绘制大 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
小为(cw, ch)的区域。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
此外,drawImage()的第一个参数也可以是另一个 canvas。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.getImageData(x, y, width, height)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

该方法从canvas内位置为(x, y)处,获得大小(width, height) 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
一块像素区域,返回值为一个ImageData对象。ImageData有width, 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
height和data三个属性。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
data属性是一个像素数组,数组中每连续的四个元素代表一个像 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
素,四个连续元素依次含有RGBA的颜色与透明度信息。四个连续的元 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
素必须属于一个像素,第一个元素的位置不是随意取的。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
像素数组是按照从上到下,从左到右的顺序在canvas中指定区域 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
扫描获取。像素数组的元素个数为width * height * 4。要获得特定 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
位置的像素信息。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
使用了该方法的Web页面若用浏览器以本地文件方式打开不会正常 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
工作,通常会产生安全错误(security error)。可以将文件上传至 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
Web服务器,然后请求访问解决此问题。并且,涉及到的图像,JS和 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
HTML必须是来自同一个域名。不过,IE9可以通过本地文件访问。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
一个例子如下:73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
//获取一个像素区域73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var imageData = context.getImageData(0, 0, 3, 3); // 3x3 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
grid</p><p>var width = imageData.width; 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
//特定像素在像素区域的位置73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var x = 2; 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var y = 2; 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
//绿颜色在像素数组中对应元素的索引73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var pixelRedindex = ((y-1)*(width*4))+((x-1)*4); 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var pixelGreenindex = pixelRedindex + 1; 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var pixelBlueindex = pixelRedindex + 2; 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var pixelAlphaindex = pixelRedindex + 3; </p><p>var pixel = imageData.data; // CanvasPixelArray </p><p>var red = pixel[pixelRedindex]; 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var green = pixel[pixelGreenindex]; 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var blue = pixel[pixelBlueindex]; 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var alpha = pixel[pixelAlphaindex];73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.createImageData(w, h)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

产生一个大小为(w, h)的ImageData对象,ImageData对象的意义 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
同getImageData()所获取的ImageData对象。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.putImageData(ImageData, x, y, x1, y1, w, h)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

将一个ImageData对象绘制到canvas上(x, y)处。后四个参数是可 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
选参数,用于设定一个裁剪矩形的位置和大小。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.createLinearGradient(x1, y1, x2, y2)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

在(x1, y1)和(x2, y2)之间产生线性渐变。如:73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var gradientName = context.createLinearGradient(-5, -50, 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
5, -50);73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ Gradient.addColorStop(offset, color)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

用于渐变中,在不同的位置设置渐变颜色。 The color argument 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
is the color you want to be applied in the stroke or fill at 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
the offset position. The offset position is a value between 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
0.0 and 1.0, representing how far along the gradient line 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
the color should be reached. 如:73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

gradientName.addColorStop(1, '#552200'); 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

其中color可用CSS中的rgba(r,g,b,a)函数来产生透明渐变,如:73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
//产生50%的颜色透明渐变73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
gradientName.addColorStop(0.2, 'rgba(0, 0, 0, 0.5)');73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.createRadialGradient(x0, y0, r0, x1, y1, r1)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

在两个圆之间产生放射渐变区域。The first three arguments 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
represent a circle centered at (x0, y0) with radius r0, and 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
the last three arguments represent a second circle centered 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
at (x1, y1) with radius r1. The gradient is drawn across the 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
area between the two circles.73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.createPattern(img, 'repeatPattern')73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

用一个图像img产生重复类型为repeatPattern的某路径的 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
strokeStyle样式或填充的fillStyle样式。repeatPattern的值可以 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
取repeat、repeat-x、repeat-y和no-repeat之一。如:73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
context.strokeStyle = context.createPattern(gravel, 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
'repeat');73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

参数 img 也可以是另一个 canvas 或 video73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.scale(xMultiple, yMultiple)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

两个参数分别指定对象在x和y方向上以后的绘制缩放倍数,大于1 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
为放大,0和1之间为缩小。若为负值,则可以实现倒影、翻转等效果 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.rotate(angle)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

用于旋转绘图环境context,以当前坐标原点为按转中心,以弧度 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
为单位,结合使用Math.PI。参数 angle 为正值时为顺时针旋转,为 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
负值时按逆时针旋转。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.transform(ScaleX, skewY, skewX, ScaleY, transX, 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
transY)
73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

该函数用于控制绘图对象的大小和切变和位置,是一种变换矩阵 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
。ScaleX 和 ScaleY 分别 x 和 y 坐标的缩放。skewY是控制 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
context的垂直切变,其值可以为任意大小的正负浮点或整型,相当 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
于对纵坐标进行y'= y + skewY * x。skewX是控制context的水平切 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
变,其值可以为任意大小的正负浮点或整型,相当于对横坐标进行 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
x'= x + skewX * y。最后两个参数的作用相当于translate(x, y)中 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
两个参数的作用。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.setTransform(ScaleX, skewY, skewX, ScaleY, 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
transX, transY)
73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

该方法类似于transform,但是transform方法会与之前已经应用 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
过的transform、scale、rotate方法效果复合,产生复杂的复合变换 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
效果。setTransform方法则会从context原始的状态应用变换,不会 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
与之前的变换复合。因此常用context.setTransform(1, 0, 0, 1, 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
0, 0)将context的变换状态恢复到其原始值。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ fillText (text, x, y, maxwidth)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

在(x, y)坐标处绘制填充内容为text的文本。maxwidth是可选参 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
数,用于限制所有文本的宽度和文本间距总和的大小,若所有和间距 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
的宽度超出这个值,则单个文本字符与字符间距的宽度都会被压缩, 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
单个字符变得细长,间距变小。可以结合context.font、 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
context.fillStyle、context.textAlign等属性绘制填充文本。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ strokeText (text, x, y, maxwidth)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

在(x, y)坐标处绘制路径内容为text的文本。maxwidt是可选参 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
数,用于限制所有文本的宽度和文本间距总和的大小,若所有和间距 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
的宽度超出这个值,则单个文本字符与字符间距的宽度都会被压缩, 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
单个字符变得细长,间距变小。可以结合context.font、 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
context.textAlign、context.lineWidth、context.strokeStyle等 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
属性绘制路径文本。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
例如:73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var fontSize = 100;73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
context.font = fontSize + "px Arial";73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
while(context.measureText("Hello world!").width > 140)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
{73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
fontSize--;73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
context.font = fontSize + "px Arial";73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
}73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
context.fillText("Hello world!", 10, 10);73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
context.fillText("Font size is " + fontSize + "px", 10, 50);73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.measureText("text")73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

该方法根据当前font, textAlign, 和 textBaseline 的值计算73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
文本所占区域的大小。text 参数是用于绘制的文本内容。该方法73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
返回一个 TextMetrics 对象,目前,TextMetrics 对象仅有一个73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
width 属性,将来可能提供更多属性。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.rect(x, y, w, h)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

在点(x, y)处绘制宽w,高h的矩形。当前点被忽略。但矩形绘制 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
完后(x, y)成为新的当前点。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.arc(x, y, radius, startAngle, endAngle, 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
anticlockwise)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

绘制圆弧。x, y是圆弧所在圆心坐标;radius是圆弧半径; 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
startAngle,endAngle分别是起始弧度和终止弧度,以弧度为单位, 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
圆周率π用Math.PI表示,值为0的弧度是水平向右的;anticlockwise 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
表示绘制弧度的方向,是可选参数,布尔值,true为逆时针,false 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
为顺时针,默认为false。使用该方法可以省略lineTo方法。在使用 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
该方法绘制一段圆弧后,接下来的路径绘制会从圆弧的结束端点开始 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.arcTo(x1, y1, x2, y2, radius)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

当前点与(x1, y1)形成一条线L1,(x1, y1)与(x2, y2)形成另一 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
条线L2,当前点与(x2, y2)形成第三条线L3。若以(x1, y1)为原点, 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
L1和L2为坐标轴,与L1和L2相切的,半径为radius,且与“线段”L3在 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
同一象限的圆O1上,设与L1的切点为p1,与L2的切点为p2。圆O1上p1 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
与p2间有两段弧线,里原点(x1, y1)较近的一段弧(也是圆上较短的 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
一段弧)为所绘制的弧线。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

另外,当前点与(x1, y1)之间也会绘制出一条线段与弧线相连接 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
,因为路径绘制是连续的,当前点与(x1, y1)之间的线段先绘制,紧 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
接着绘制弧线。切点p2成为下一个当前点。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
该方法常用于绘制圆角矩形。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.quadraticCurveTo(x1, y1, x2, y2)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

在当前坐标与(x2, y2)绘制一条二次贝塞尔曲线段,弯曲度由 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
(x1, y1)控制。(x1, y1)不在曲线段上。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

Other options for curves in the HTML5 Canvas API include 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
the bezierCurveTo, arcTo, and arc functions. These curves 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
take additional control points,a radius, or angles to 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
determine the characteristics of the curve.73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

在当前点与(x, y)间绘制由控制点(cp1x, cp1y)和(cp2x, cp2y) 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
控制弯曲度的三次贝塞尔曲线。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.clip()73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

这个方法将根据上一次所绘制的闭合路径创建一个剪辑区域73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
(clip region)。剪辑区域相当于一个蒙版,以后绘制的内容仅73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
落在剪辑区域内的部分才会被显示。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ context.isPointInPath(x, y)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

检测坐标(x, y)是否在已绘制的路径内。返回值为 true 或73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
false。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

☆ canvas.toDataURL(type, args)73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

该方法能够将canvas转换为图像,图像是基于Base64编码的。如 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
果不指定两个参数,无参数调用该方法,转换的图像格式为png格式 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
•type:指定要转换的图像格式,如 image/png、image/jpeg等。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
•args:可选参数。例如,如果type为image/jpeg,则args可以是 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
0.0和0.1之间的值,以指定图像的品质。73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
例如,下面的代码将canvas中已绘制的内容在一个新的浏览器窗 73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
口或选项卡中打开:73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
var canvas = document.getElementById("myCanvas");73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
window.open(canvas.toDataURL("image/png"));73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
73W成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

成网科技 www.it28.com竭诚为您服务!
开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设_成网科技

更多
 


来顶一下
返回首页
返回首页
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
推荐资讯
相关文章
栏目更新
栏目热门