《html5_canvas基本属性与用法介绍课件》由会员分享，可在线阅读，更多相关《html5_canvas基本属性与用法介绍课件（47页珍藏版）》请在金锄头文库上搜索。
1、HTML5 Canvas,Canvas基础 设置Canvas绘图样式 canvas绘制图形 Canvas引用图像 Canvas的画布处理,Canvas的图形组合 Canvas绘制文字 Canvas其他知识 保存与恢复 保存文件 获取像素信息 基本动画,Canvas基础,Canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面上放置一个canvas元素就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。 Canvas的绘制需要通过JS编写在其中进行绘画的脚本。,Canvas元素的基础知识,看起来很像，唯一不同就是它不含 src 和 alt 属性。 它只有两个属性，wi
2、dth 和 height，两个都是可选的，并且都可以 DOM 或者 CSS 来设置。 如果不指定width 和 height，默认的是宽300像素，高150像素。 虽然可以通过 CSS 来调整canvas的大小，但渲染图像会缩放来适应布局的 。 结束标签 是必须的,放置Canvas, .canvas width:150px; height:150px; canvas border: 1px solid black; 写在这里面的内容将展示给不兼容canvas的浏览器 ,演示（canvas 基础测试模板2.html）,模板JS,以下js是测试用的html文档中通用的，但是并不指必须如此 func
3、tion draw() canvas = document.getElementById(canvas); if (canvas.getContext) /检测浏览器是否兼容 ctx = canvas.getContext(2d); /你的canvas代码在这里 /不兼容的代码 ,绘制图形,HTML DOM getContext() 方法,定义和用法 getContext() 方法返回一个用于在画布上绘图的环境。 语法 Canvas.getContext(contextID) 参数 参数contextID指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这
4、个方法返回一个环境对象，该对象导出一个二维绘图 API。 提示：在未来，如果 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 “3d” 字符串参数。（即现在不仅能支持“2D”）。 返回值 一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。 描述 返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 2d，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。,返回,下一页：设置绘图样式,设置绘图样式
5、,填充样式 fillStyle() 颜色值支持半透明 具体请看示例 描边样式 strokeStyle() 颜色值支持半透明 设定线条样式 设定线宽 lineWidth() 设定图线帽样式 lineCap butt,round,square 线的链接样式 lineJoin round,bevel,miter 绘制渐变 绘制线性渐变 绘制径向渐变,下一页：绘制阴影,给图形绘制阴影,shadowOffsetX阴影的横向移动 shadowOffsetY阴影的纵向移动 shadowColor阴影的颜色 shadowBlur阴影的模糊范围,ctx.strokeStyle=rgb(200,0,0); ctx
6、.fillStyle=rgb(255,0,0); ctx.shadowOffsetX=3; ctx.shadowOffsetY=3; ctx.shadowColor=rgba(150,0,0,0.2); ctx.shadowBlur=3; ctx.beginPath(); ctx.moveTo(75,60); ctx.bezierCurveTo(125,20,125,100,75,115); ctx.bezierCurveTo(25,100,25,20,75,60); ctx.stroke(); ctx.fill();,示例,下一页：绘制线性渐变,HTML DOM createLinearGr
7、adient() 方法,定义和用法 createLinearGradient() 方法创建一条线性颜色渐变。 语法 createLinearGradient(xStart, yStart, xEnd, yEnd),这个方法创建并返回了一个新的 CanvasGradient 对象，它在指定的起始点和结束点之间线性地内插颜色值。注意，这个方法并没有为渐变指定任何颜色。使用返回对象的addColorStop()来做到这一点。要使用一个渐变来勾勒线条或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。,下一页:canvas线性渐变
8、示例,canvas线性渐变示例,function draw() var cxt = document.getElementById(canvas).getContext(2d); var grd=cxt.createLinearGradient(1,1,175,50); /(开始坐标x，开始坐标y，结束点X，结束点Y) grd.addColorStop(1,“#0000ff”);/addColorStop(offset, color)/*参数：百分比，颜色值*/ grd.addColorStop(0,#00FF00); cxt.fillStyle=grd; cxt.fillRect(1,1,1
9、75,50); ,示例,返回,下一页：canvas径向渐变,HTML DOM createRadialGradient() 方法,定义和用法 createRadialGradient() 方法创建一条放射颜色渐变。 语法 createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd),返回值 表示一个放射性颜色渐变的一个CanvasGradient 对象。 描述 这个方法创建并返回了一个新的 CanvasGradient 对象，该对象在两个指定圆的圆周之间放射性地插值颜色。注意，这个方法并没有指定任何用来渐变的颜
10、色。使用返回对象的addColorStop() 方法做到这一点。要使用一个渐变来勾勒线条或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。 放射性渐变的绘制方法 使用第一个圆的圆周在偏移 0 处的颜色和第二个圆的圆周在偏移 1 处的颜色，在两个位置之间的圆上插入颜色值（红色、绿色、蓝色和 alpha）。,下一页：canvas径向渐变示例,canvas径向渐变示例,var radgrad = ctx.createRadialGradient(75,75,1,75,75,60); radgrad.addColorStop(0
11、, #A7D30C); radgrad.addColorStop(0.9, #019F62); radgrad.addColorStop(1, rgba(1,159,98,0); ctx.fillStyle = radgrad; ctx.fillRect(0,0,150,150);,下一页：canvas绘制图形,通过JS在画布上绘制图形,使用路径 beginPath() stopPath() moveTo() lineTo() 绘制矩形 Rect() fillRect() strokeRect() clearRect() 绘制圆形 arc() 绘制贝塞尔曲线 quadraticCurveTo(
12、) bezierCurveTo() Fill() strock(),使用图像,开始与闭合路径,beginPath() 该方法不使用参数。通过调用该方法，开始路径的创建。在几次循环地创建路径的过程中，每次开始创建时都要调用beginPath函数 closePath() 如果当前子路径是打开的，就关闭它。路径创建完成后，使用图形上下文对图像的closePath方法将路径关闭。将路径关闭后，路径的创建工作就完成了，但是注意，这时只是路径创建完毕而已，还没有真正的绘制任何图形。,*注：beginPath和 closePath方法有时候即使不用也可以进行填充和描边，但是如果不使用那么在最后填充的时候将把
13、所有路径当做一个路径进行填充。示例,返回,下一页：HTML DOM moveTo() 方法,HTML DOM moveTo() 方法,定义和用法 moveTo() 方法可把窗口的左上角移动到一个指定的坐标。 语法 window.moveTo(x,y) 参数描述 x窗口新位置的 x 坐标y窗口新位置的 y 坐标,*注：moveTo其实就相当于我们画图时提起画笔到画布的另一个地方，在这个过程中我们并没有进行绘制路径。具体用的时候像：开始在哪画、画完一笔之后再到哪里去画之类的用法。,下一页：HTML DOM lineTo() 方法,HTML DOM lineTo() 方法,定义和用法 lineTo(
14、) 方法为当前子路径添加一条直线。 语法 lineTo(x, y) 参数描述 x, y直线的终点的坐标。 描述 lineTo() 方法为当前子路径添加一条直线。这条直线从当前点开始，到 (x, y) 结束。当方法返回时，当前点是 (x,y)。,ctx.beginPath(); ctx.moveTo(1,1); ctx.arc(50,50,30,0,Mat.PI*2,true); ctx.lineTo(150,150); ctx.closePath(); ctx.stroke(); /*这个例子中我们发现当用了moveTo之后如果再用arc那么moveTo的点会自动连接到圆的起点而lineTo则
15、从圆的终点开始，颠倒顺序后，lineTo的终点又会自动连接到圆的起点*/,*对照moveTo ,lineTo就相当于在刚刚提笔到的地方开始画一条线，这条线的结束点就是（x，y），另外就是直线画到这里，当前画笔的位置就到了（x，y）这个点。后面的画矩形就不是了。 示例,返回,下一页：HTML DOM rect() 方法,HTML DOM rect() 方法,定义和用法 rect() 方法为当前路径添加一条矩形子路径。 语法 quadraticCurveTo(x, y, width, height) 参数描述x, y矩形的左上角的坐标。width, height矩形的大小。 描述 rect() 方
16、法为路径添加了一个矩形。这个矩形是路径的一个子路径并且没有和路径中的任何其他子路径相连。 *当 rect() 方法返回时，当前位置是 (0,0)。 注：这时候不可以直接使用lineTo方法画路径，必须先moveTo之后才行。 示例,返回,下一页：HTML DOM arc() 方法,HTML DOM arc() 方法,定义和用法 arc() 方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧。 语法 arc(x, y, radius, startAngle, endAngle, counterclockwise) 参数描述 x, y描述弧的圆形的圆心的坐标。radius描述弧的圆形的半径。startAngle, endAngle沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。沿着 X 轴正半轴的三点钟方向的角度为 0，角度沿着逆时针方向而增加。counterclockwise弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。 描述 这个方法的头 5 个参数指定了圆周的一个起始点和结束点。调用这
