IT技术浅谈
联系我们
主页 > IT技术浅谈 > IT技术浅谈

JavaScript & HTML5 Canvas 概览 更新时间2014-0411-1805

时间:2019-01-11  编辑:AG88

HTML Canvas

坐标体系:矩形区域的左上角为坐标原点(0,0),向右为x轴,向下为y轴。

检测浏览器是否支持Canvas(IE系列从IE9开始支持):

检测浏览器是否支持Canvas

Canvas的各种属性表:

属性名称 描述  
fillStyle 填充属性 可以为一个字符串颜色值,也可以为gradient对象,或者pattern对象
strokeStyle 绘制属性 可以为一个字符串颜色值,也可以为gradient对象,或者pattern对象
font 字体样式定义  
globalAlpha 图形透明设置  
globalCompositeOperation 前后绘制的图形组合显示效果  
lineCap 线帽  
lineJoin 两条线段连接处的样式  
lineWidth 线宽 为一个数字
miterLimit 定义斜连接线和线条宽度的最大比率,这个属性只有当lineJoin="miter"时才有用  
shadowBlur 阴影模糊  
shadowColor 阴影色彩  
shadowOffsetX 阴影横向偏移  
shadowOffsetY 阴影纵向偏移  
textAlign 文本水平对齐  "start","end","left","right","center"
textBaseline 文本垂直对齐  "aplhabetic","top","hanging","middle","ideographic","bottom"

对于有global的属性都是全局属性,在使用的时候注意要先save()再restore()配置。

 

Canvas中的保存和回复

通过save()方法保存渲染上下文,通过restore()方法恢复上次保存的渲染上下文。

 

Canvas中的线

一个路径绘制通常会在beginPath()和closePath()之间完成;通过stroke()来执行实际的绘制。
弧度:一个圆一周的弧度为2π,一周的角度为360。
绘制弧线的arc()方法需要指定(圆心位置x,圆心位置y,半径,起始弧度,结束弧度,绘图方向),以圆心画弧;
绘制弧线的arcTo()方法需要指定(两条线的交点X,两条线的交点Y,其中一条线的经过点X,其中一条线的经过点Y,弧线半径),以相交线画弧。

Canvas中的lineTo()、arc()、arcTo()的使用

二次方曲线quadraticCurveTo(控制点X坐标,控制点Y坐标,结束点X坐标,结束点Y坐标) 通过一个控制点来绘制曲线:

quadraticCurveTo

贝塞尔曲线bezierCurveTo()方法比quadraticCurveTo()方法多一个控制点:

bezierCurveTo

Canvas没有专门绘制圆的API,可以通过arc()来绘制,再通过filleStyle属性来设置填充,并通过fill()来关闭路径并填充。

 

Canvas中的矩形

用fillRect()指定左上角和右下角指定下矩形,fileRect()调用的时候会星清晰化路径;
用strokeRect()可以绘制一个矩形的边框,该方法也会清晰化路径。

绘制矩形以及Canvas中的线宽绘图对齐位置

 

Canvas中的图片

在Canvas中可以使用drawImage()方法或者createPattern()方法来绘制图片。

drawImage有3种参数格式:drawImage(img,x,y); drawImage(img,x,y,w,h); drawImage(img,s1x,s1y,s2w,y2h,d1x,d1y,d2w,d2h);
createPattern(img,css-position)方法主要用于背景图片的处理,第二个参数很像CSS中的background-position属性。

使用drawImage绘图 使用createPattern绘图

 

Canvas中的文字

Canvas中文字有两种显示方式,一种用fillText()方法,另一种用strokeText()方法,同绘制矩形的API很像。
绘制前可以设置font、textAlign、textBaseline属性来控制绘制文字。

Canvas中的文字绘制以及textAlign属性和textBaseLine属性

线性渐变createLinearGradient 圆周渐变createRadialGradient

copy 只绘制新图形,删除其他所有内容 darker 图形重叠的地方的颜色由两个颜色值相减后的值决定 destination-atop 已有的内容只有在它和新图形重叠的地方保留。新图形绘制在内容之后。 destination-in 新图形以及已有画布重叠的地方,已有内容都保留,所有其他内容成为透明。 destination-out 新图像以及已有画布不重叠的地方,已有内容都保留,所有其他内容成为透明。 destination-over 新图形绘制于已有内容的后面。 lighter 图形重叠的地方的颜色由两个颜色值相加后的值决定 source-atop 重叠的地方绘制新图形。 source-in 新图形以及已有画布重叠的地方,绘制新图形,所有其他内容成为透明。 source-out 新图像以及已有画布不重叠的地方,绘制新图形,所有其他内容成为透明。 source-over 新图形绘制于已有图形的顶部,为默认行为。 xor 在重叠和正常绘制的其他地方,图形都成为透明。 Canvas中的裁剪

使用clip()方法裁剪的区域之外的动画不受影响,该方法通过计算所有的子路径来建立新的剪切区域,
未闭合的子路径在填充区按照闭合方式填充,但并不影响实际的子路径集合,新的剪切区域将替换当前的剪切区域。
裁剪路径其实就是绘图路径,只不过这个路径不是拿来绘图的,而是设定显示区域和遮挡区域的一个分界线。

Canvas中的像素操作

可以通过createImageData(w,h)方法来创建一个全透明黑色的空白像素矩阵。

可以通过putImageData(canvasData,imgX,imgY,toX,toY,toW,toH)方法来将图像渲染到画布上。
当前通过putImageData()到画布上的图像不会受scale()等方法的影响。

可以通过getImageData(x,y,w,h)方法来获取Canvas中某一矩形区域的像素数据,像素数据按照RGBA方式排序。

通过像素操作来模糊图片

 

 

http://www.bkjia.com/HTML5/752986.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/752986.htmlTechArticleHTML Canvas 坐标体系:矩形区域的左上角为坐标原点(0,0),向右为x轴,向下为y轴。 检测浏览器是否支持Canvas(IE系列从IE9开始支持): 检测...

本文源自: AG游戏网站

Copyright © 2005-2016 http://www.firebugkc.com AG游戏网站_亚洲最佳百家乐游戏平台_AG环亚集团_网易体育版权所有 AG游戏网站_亚洲最佳百家乐游戏平台_AG环亚集团_网易体育