版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
HTML5
Canvas
入门什么是HTML?HTML
指的是超文本标记语言:HyperText
MarkupLanguageHTML不是一种编程语言，而是一种标记语言标记语言是一套标记标签(markup
tag)HTML使用标记标签来描述网页HTML文档包含了HTML
标签及文本内容HTML文档也叫做web
页面HTML
标记标签通常被称为HTML标签(HTMLtag)HTML
标签是由尖括号包围的关键词，比如<html>HTML
标签通常是成对出现的，比如<b>和</b>标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签HTML5有什么不同？HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定HTML5中的一些有趣的新特性：用于绘画的canvas
元素用于媒介回放的video
和audio
元素对本地离线存储的更好的支持新的特殊内容元素，比如article、footer、header、nav、section新的表单控件，比如calendar、date、time、email、url、search与CSS,JS是什么样的关系？CSS
指层叠样式表(Cascading
Style
Sheets)样式定义如何显示HTML
元素样式通常存储在样式表中把样式添加到HTML
4.0
中，是为了解决内容与表现分离的问题JavaScript
是互联网上最流行的脚本语言，这门语言可用于
HTML和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备JavaScript
是一种轻量级的编程语言。JavaScript
是可插入HTML
页面的编程代码。HTML5
Canvas介绍HTML5<canvas>元素用于图形的绘制，通过脚本(通常是
JavaScript)来完成.<canvas>
标签只是图形容器，必须使用脚本来绘制图形基于状态进行绘制可以通过多种方法使用Canva绘制路径,圆、字符以及添加图像Canvas的默认大小是300*150基本知识context是一个封装了很多绘图功能的对象，获取这个对象的方法是var
context
=canvas.getContext("2d");canvas元素绘制图像的时候有两种方法，分别是context.fill()//填充
context.stroke()//绘制边框style:在进行图形绘制前，要设置好绘图的样式
context.fillStyle//填充的样式
context.strokeStyle//边框样式
context.lineWidth//图形边框宽度颜色的表示方式:直接用颜色名称:"red""green"
"blue"十六进制颜色值:"#EEEEFF"rgb(1-255,1-255,1-255)rgba(1-255,1-255,1-255,透明度)绘制矩形context.fillRect(x,y,width,height)context.
strokeRect(x,y,width,height)x:矩形起点横坐标y:矩形起点纵坐标
width:矩形长度
height:矩形高度清除矩形区域context.clearRect(x,y,width,height)x:清除矩形起点横坐标
y:清除矩形起点纵坐标
width:清除矩形长度
height:清除矩形高度绘制线段路径context.beginPath()
context.closePath()绘制路径使用时的注意点：1.系统默认在绘制第一个路径的开始点为beginPath*2、如果画完前面的路径没有重新指定beginPath，那么画其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分在每个Canvas
实例对象中都拥有一个path
对象，创建自定义图形的过程就是不断对path对象操作的过程。每当开始一次新的图形绘制任务，都需要先使用beginPath()方法来重置path
对象至初始状态，中间是一系列画线方法的调用，最后是最后一步，也是可选的步骤，是调用
closePath()方法将自定义图形进行闭合，该方法将自动创建一条从当前坐标到起始坐标的直线。绘制线段context.moveTo(x,y)context.lineTo(x,y)x:x坐标y:y坐标每次画线都从moveTo的点到lineTo的点如果没有moveTo那么第一次lineTo的效果和moveTo一样,每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前一次lineTo的结束点绘制圆形context.arc(x,
y,
radius,
startAngle,endAngle,
anticlockwise)x:圆心的x坐标
y:圆心的y坐标radius：圆的半径
startAngle:开始角度
endAngle:结束角度anticlockwise:是否逆时针（true）为逆时针，(false)为顺时针Math.PI是半圆Math.PI*2是整个圆0.5为四分之一变形图形平移context.translate(x,y)x:坐标原点向x轴方向平移xy:坐标原点向y轴方向平移y缩放context.scale(x,y)x:x坐标轴按x比例缩放
y:y坐标轴按y比例缩放旋转context.rotate(angle)angle:坐标轴旋转x角度（角度变化模型和画圆的模型一样）矩阵变换context.transform(m11,m12,m21,m22,dx,dy)所谓的矩阵变换其实是context内实现平移，缩放，旋转的一种机制主要原理就是矩阵相乘context.translate(x,y)
等同于context.transform
(1,0,0,1,x,y)或context.transform(0,1,1,0.x,y)context.scale(x,y)等同于context.transform(x,0,0,y,0,0)或context.transform
(0,y,x,0,
0,0);context.rotate(θ)等同于context.transform(Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180),-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)，0，0）或context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)，Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180),0，0）矩阵变换context.setTransform(m11,m12,m21,m22,dx,dy)setTransform方法的参数及参数的用法与transform相同，该方法的作用是为将画布上的最左上角重置为坐标原点。绘制贝塞尔曲线context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)cp1x:第一个控制点x坐标
cp1y:第一个控制点y坐标
cp2x:第二个控制点x坐标
cp2y:第二个控制点y坐标
x:终点x坐标y:终点y坐标绘制二次样条曲线context.quadraticCurveTo(qcpx,qcpy,qx,qy)qcpx:二次样条曲线控制点x坐标
qcpy:二次样条曲线控制点y坐标
qx:二次样条曲线终点x坐标qy:二次样条曲线终点y坐标渐变线性渐变var
lg=
context.createLinearGradient(xStart,yStart,xEnd,yEnd)线性渐变颜色lg.addColorStop(offset,color)xstart:渐变开始点x坐标ystart:渐变开始点y坐标
xEnd:渐变结束点x坐标
yEnd:渐变结束点y坐标offset:设定的颜色离渐变结束点的偏移量(0~1)color:绘制时要使用的颜色径向渐变（发散）var
rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)径向渐变（发散）颜色rg.addColorStop(offset,color)xStart:发散开始圆心x坐标
yStart:发散开始圆心y坐标
radiusStart:发散开始圆的半径
xEnd:发散结束圆心的x坐标
yEnd:发散结束圆心的y坐标
radiusEnd:发散结束圆的半径offset:设定的颜色离渐变结束点的偏移量(0~1)color:绘制时要使用的颜色图形组合控制图像组合形式的属性为：globalCompositeOperation图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢，还是相互重叠的部分不显示等等，至于怎么显示就取决于type的值了，绘制文字填充文字：context.fillText(text,x,y,[maxWidth])绘制文字轮廓context.strokeText(text,x,y
,[maxWidth])text:要绘制的文字x:文字起点的x坐标轴
y:文字起点的y坐标轴maxWidth为可选参数，表示显示文字时的最大宽度context.font:设置字体样式[font
style][font
weight][font
size][font
face]””context.textAlign:水平对齐方式，属性值可以为start、end、left、right、centercontext.textBaseline:垂直对齐方式，属性值可以为top、hanging、middle、alphabetic、ideographic、bottomvar
length=context.measureText(text).width
测量文本的长度阴影给画布上的形状添加阴影，四个参数设置：context.shadowOffsetX:阴影的横向位移量（默认值为0）context.shadowOffsetY:阴影的纵向位移量（默认值为0）context.shadowColor:阴影的颜色context.shadowBlur:阴影的模糊范围（值越大越模糊）图像应用绘图：context.drawImage图像平铺：context.createPattern(image,type)图像裁剪：context.clip()像素处理：varimagedata=context.getImageData(sx,sy,sw,sh)绘图context.drawImagecontext.drawImage(image,x,y)image:Image对象var
img=newImage();
img.src="url(...)";x:绘制图像的x坐标y:绘制图像的y坐标context.drawImage(image,x,y,w,h)image:Image对象var
img=newImage();
img.src="url(...)";x:绘制图像的x坐标y:绘制图像的y坐标
w:绘制图像的宽度
h:绘制图像的高度context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):选取图像的一部分矩形区域进行绘制
image:Image对象var
img=newImage();
img.src="url(...)";sx：图像上的x坐标sy：图像上的y坐标
sw：矩形区域的宽度
sh：矩形区域的高度
dx：画在canvas的x坐标
dy：画在canvas的y坐标
dw：画出来的宽度
dh：画出来的高度图像平铺context.createPattern(image,type)type:no-repeat:不平铺
repeat-x:横方向平铺
repeat-y:纵方向平铺
repeat:全方向平铺像素处理：获取像素颜色数组：var
imagedata=context.getImageData(sx,sy,sw,sh)sx:cavas的x轴坐标点sy:canvas的y轴坐标点
sw:距离x的宽度sh:距离y的高度ImageData变量是一个CanvasPixelArray对象，height、width、data等属性。data属性是一个像素颜色数组，顺序是所取像素范围的从左到右，从上到下，数组的元素是（所有图形，包括图片，和绘制的图形）每个像素的rgba[r1,g1,b1,a1,r2,g2,b2,a2...]设置像素颜色：context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight)对imagedata数组中的各个像素的r、g、b、a值进行修改，再调用putImageData方法进行绘制
imagedata:修改后的imagedatadx:重绘图像的起点横坐标（重绘的起点和原来的图像一致的话就会把原来的图形覆盖掉，看起来就像是原来的图像变成现在的图像一样）dy:重绘图像的起点纵坐标//以下可选参数，设置重绘的矩形范围，如果缺省，默认会重绘所有的imegedatadirtyX:矩形左上角x轴坐标dirtyY:矩形左上角y轴坐标
dirtyWidth:矩形长度dirtyHeight:矩形高度保存和恢复状态保存：context.save()
恢复：context.restore()context.save()：调用该方法，会保存当前context的状态、属性（可理解成游戏存档）context.restore():调用该方法就能恢复到save时候context的状态、属性（游戏回档）简单动画setInterval:setInterval(表达式,交互时间)它从载入后,每隔指定的时间就执行一次表达式setTimeout:setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 二零二五版高科技产品出口许可与合同履行协议3篇
- 二零二五版国际贸易合同担保法风险管理合同3篇
- 碎石加工设备2025年度保险合同2篇
- 二零二五版企业员工劳务派遣与员工福利保障合同3篇
- 二零二五年度粮食储备与农业产业化合作合同3篇
- 二零二五年度高层综合楼公共收益分配管理合同3篇
- 二零二五年度校车运营服务与儿童座椅安全检测合同3篇
- 二零二五版带储藏室装修包售二手房合同范本3篇
- 二零二五年房地产合作开发与股权让渡综合合同2篇
- 二零二五年度花木种植与生态农业园区建设合同3篇
- 2024年高标准农田建设土地承包服务协议3篇
- 阅读理解(专项训练)-2024-2025学年湘少版英语六年级上册
- 2024-2025学年人教版数学六年级上册 期末综合试卷（含答案）
- 无创通气基本模式
- 2024年全国统一高考英语试卷(新课标Ⅰ卷)含答案
- 2024年认证行业法律法规及认证基础知识 CCAA年度确认 试题与答案
- 欠薪强制执行申请书
- 矿山年中期开采重点规划
- 资源库建设项目技术规范汇编0716印刷版
- GC2级压力管道安装质量保证体系文件编写提纲
- 预应力混凝土简支小箱梁大作业计算书
评论
0/150
提交评论