canvas教程

HTML5之API总结

字号+ 作者:H5之家 来源:H5之家 2017-01-11 12:00 我要评论( )

HTML5之API总结

canvas API 是 H5 标准中最复杂的部分, 它提供几种属性和方法,可以在 canvas 元素上创建图形应用

方法

以下方法专门用于调用canvas API

  • getContext(context) 创建可绘制图形的画布上下文,接受两个值, 2d 和 3d

  • fillRect(x,y,width,height) 绘制实心矩形

  • strokeRect(x,y,width,height) 绘制矩形轮廓

  • clearRect(x,y,width,height) 清除画布指定区域内容

  • createLinearGradient(x1,y1,x2,y2) 创建一个线性渐变效果

  • createRadialGradient(x1,y1,r1,x2,y2,r2) 创建一个放射渐变效果

  • addColorStop(position,color) 用于声明渐变颜色 position 范围是 0.0-1.0 用于确定颜色开始变化位置

  • beginPath() 开始一条新路径

  • closePath() 在路径最后实现封闭该路径,它会生成一条直线,连接笔触的最后一个位置与路径的起点。如想要保持路径开放,使用 fill() 绘图,不用这个方法

  • stroke() 用于创建路径轮廓

  • fill() 用于绘制实心形状

  • clip() 用于创建一个由路径定义的裁剪区域,只有在落入形状内的内容才绘制到画布上

  • moveTo(x,y) 将虚拟笔触移到新位置,下一个方法会从改点的开始继续设置路径

  • lineTo(x,y) 在新路径上添加一条直线

  • rect(x,y,width,height) 在路径为 (x,y) 位置上添加 width 和 height 矩形

  • arc(x,y,radius,startAngle,endAngle,direction) 在路径上添加一条弧线 , x , y 指定弧线的中心,角度单位为弧度, direction 是一个表示顺时针或逆时针的布尔值。使用公式 Math.PI/180x 角度,将角度转换为半径

  • strokeText(text,x,y,max) 直接在画布上绘制文字轮廓。可选参数,max声明文字最大尺寸

  • fillText(text,x,y,max) 直接在画布上绘制实心文字。可选参数, max 声明文字最大尺寸

  • translate(x,y) 将画布原点移到点 (x,y) 处,原点 (0,0) 初始位置位于 canvas 所在区域的左上角

  • rorate(angle) 这个方法可以使画布原点为中心发生旋转,角度必须是弧度。使用公式 Math.PI/180x 将角度转换为弧度

  • scale(x,y) 改变画布比例 默认值是 (1.0,1.0) 这些值可以是负值

  • transform(m1,m2,m3,m4,dx,dy) 修改画布的转换矩阵。新矩阵是基于之前的矩阵得到的

  • setTransform(m1,m2,m3,m4,dx,dy) 修改画布的转换矩阵。重置之前的值,声明新的值

  • save() 保存画布状态,包括转换矩阵、样式属性、裁剪遮罩

  • restore() 恢复上一次保存的状态

  • drawImage() 在画布上绘制图像

  • 属性

    canvas API 专用属性列表

  • rect( x, y, width, height ) 绘制矩形
  • fillRect( x, y, width, height ) 绘制被填充的矩形
  • strokeRect( x, y, width, height ) 绘制矩形(无填充)
  • clearRect( x, y, width, height ) 清除指定的矩形内的像素

  • fill() 填充当前绘图(路径)

  • stroke() 绘制已定义的路径
  • beginPath() 起始(重置)当前路径
  • moveTo( x, y ) 将笔触移动到指定的坐标(x,y)
  • lineTo( x, y ) 绘制一条从当前位置到指定的坐标(x,y)的直线
  • clip() 从原始画布剪切任意形状和尺寸的区域
  • quadraticCurveTo() 创建二次贝塞尔曲线
  • bezierCurveTo() 创建三次贝塞尔曲线
  • arc( x, y, radius, startAngle, endAngle, anticlockwise) 绘制圆或圆弧
  • arcTo( x1, y1, x2, y2, radius) 根据给定点画圆弧,再以直线连接两个点
  • isPointInPath( x, y ) 检测指定的点是否在当前路径中,在则返回true。

  • fillStyle 设置或返回用于填充绘画的颜色、渐变或模式

  • strokeStyle 设置或返回用于笔触的颜色、渐变或模式
  • shadowColor 设置或返回用于阴影的颜色
  • shadowBlur 设置或返回用于阴影的模糊级别
  • shadowOffsetX 设置或返回阴影与形状的水平距离
  • shadowOffsetY 设置或返回阴影与形状的垂直距离

  • lineCap 设置或返回线条的结束点样式( butt 、 round 、 square )

  • lineJoin 设置或返回当两条线交汇时,边角的类型( bevel 、 round 、miter)
  • lineWidth 设置或返回当前的线条宽度
  • miterLimit 设置或返回最大斜接长度

  • createLinearGradient( x0, y0, x1, y1 ) 创建线性渐变

  • createPattern( image/canvas/video, repeat ) 在指定的方向内重复绘制指定的元素
  • createRadialGradient( x0, y0, r0, x1, y1, r1 ) 创建径向渐变
  • addColorStop( stop, color ) 规定渐变对象中的颜色和停止位置

  • font 设置或返回文本内容的当前字体属性(和css的font一样)

  • textAlign 设置或返回文本内容的当前对齐方式
  • textBaseline 设置或返回在绘制文本时使用的当前文本基线
  • fillText( text, x, y ) 在画布上绘制“被填充”的文本
  • strokeText( text, x, y ) 在画布上绘制文本(无填充)
  • measureText( text ) 返回包含指定文本宽度的对象(属性width获取宽度)

  • drawImage( image/canvas, x, y ) 、drawImage( image/canvas, x, y, width, height )、drawImage( image/canvas, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )` 在画布上绘制图像、画布或视频

  •  

  • 1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • html5 new image,磁力链接

      html5 new image,磁力链接

      2017-01-10 12:01

    • 【网盘资源】《HTML5 Canvas核心技术图形动画与游戏开发》.((美)

      【网盘资源】《HTML5 Canvas核心技术图形动画与游戏开发》.((美)

      2017-01-10 10:00

    • html5 canvas开发详解 pdf

      html5 canvas开发详解 pdf

      2017-01-07 08:00

    • HTML5+CSS3:3D展示商品信息示例

      HTML5+CSS3:3D展示商品信息示例

      2017-01-06 15:03

    网友点评