html5:canvas教程

html5:canvas教程

ID:9236528

大小:77.95 KB

页数:81页

时间:2018-04-24

html5:canvas教程_第1页
html5:canvas教程_第2页
html5:canvas教程_第3页
html5:canvas教程_第4页
html5:canvas教程_第5页
资源描述:

《html5:canvas教程》由会员上传分享,免费在线阅读,更多相关内容在学术论文-天天文库

1、canvas变换变换操作并不限于缩放和平移,我们可以使用函数context.rotate(angle)来旋转图像,甚至可以直接修改底层变换矩阵以完成一些高级操作,如剪裁图像的绘制路径。如:context.rotate(1.57),旋转角度参数以弧度为单位。beginPath():开始moveTo(x,y):起点坐标lineTo(x,y):目标坐标closePath():连接起点,闭合路径translate():移动rotate():旋转restore():恢复scale():缩放save():保存rotate(angle):旋转

2、图像quadraticCurveTo():绘制曲线stroke():绘制strokeText():描绘文本轮廓strokeStyle():颜色设置strokeRect():使用当前的storkestyle来绘制一个矩形,而只绘制矩形的边缘。fill:填充fillRect():绘制一个矩形,并以当前的fillStyle来填充fillStyle():样式填充fillText:填充文本内容drawIamge():图片填充createPattern():使用背景图片填充addColorStop():渐变填充createRadialGra

3、dient():放射性渐变clearRect():清除指定矩形区域的像素.lineCap(butt

4、square

5、round):指定线条末端的样式.fillStyle:设置为CSS颜色、一个图案或一种颜色渐变.lineWidth:线条宽度设置.lineJoin(round):修改当前形状中线段的连接方式,让拐角变得更圆滑.shadowColor:任何css中的颜色值,可以使用透明度(alpha).shadowOffsetX:像素值,值为正数,向右移动阴影;值为负数,向左移动阴影.shadowOffsetY:像素值,值为正数,向下

6、移动阴影;值为负数,向上移动阴影.shadowBlur:高斯模糊值,值越大,阴影越模糊HTML5资料1Canvas教程是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素。例如,他可以用于绘图、制作图片的组合或者简单的动画(当然并不那么简单)。Itcanforinstancebeusedtodrawgraphs,makephotocompositionsordosimple(andnotsosimple)animations.1.1基本用法Basicusage 元素Let'sst

7、artthistutorialbylookingattheelementitself. 让我们从元素的定义开始吧。Thislooksalotliketheelement,theonlydifferenceisthatitdoesn'thavethesrcandaltattributes.看起来很像,唯一不同就是它不含src和alt属性。The

8、elementhasonlytwoattributes-widthandheight.ThesearebothoptionalandcanalsobesetusingDOMpropertiesorCSSrules.它只有两个属性,width和height,两个都是可选的,并且都可以DOM或者CSS来设置。Whennowidthandheightattributesarespecified,thecanvaswillinitiallybe300pixelswideand150pixelshigh.如果不指定width和height

9、,默认的是宽300像素,高150像素。TheelementcanbesizedarbitrarilybyCSS,butduringrenderingtheimageisscaledtofititslayoutsize.  (Ifyour renderingsseemdistorted,tryspecifyingyourwidthandheightattributesexplicitlyintheattributes,andnotwithCSS.)虽然可以通过CSS来调整canvas的大小,但渲染图像会缩放来适应布

10、局的(如果你发现渲染结果看上去变形了,不必一味依赖CSS,可以尝试显式指定canvas的width和height属性值)。Theidattributeisn'tspecifictotheelementbutisoneofdefaultHTMLat

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。