×

HTML5 canvas画布

96
飞鱼_JS
2017.06.01 19:47* 字数 876

canvas用途

  • 游戏 小游戏
  • 图表 报表 如 Charts插件
  • 炫酷效果 banner
  • 模拟器、图形编辑器 等

兼容性

IE9以上和其他浏览器

canvas 标签

属性

  • width
  • height

方法

  • getContext() 参数 2d/webgl

注意

css设置的宽高跟width/height设置的宽高 不同

Context环境

通过 getContext方法获取绘图环境(绘图上下文)(对象)
绘制图形通过该对象提供的方法/属性

基本绘图

路径

  • moveTo() 起始位置
  • lineTo() 直线 ,如果没有moveTo() 第一个lineTo()替代 moveTo()

路径的开始和关闭

  • beginPath() 开启路径
  • closePath() 关闭路径 结束当前的路径,自动闭合
  • 注意: 复杂的图形,一定要开启和关闭路径

描边 stroke()

  • stroke() 方法
  • strokeStyle 设置描边颜色
  • lineWidth 设置描边的粗细

填充

  • fill() 填充
  • fillStyle 设置填充颜色

快速矩形工具

  • rect(x, y, width, height) 绘制矩形路径
  • strokeRect(x, y, width, height) 描边矩形
  • fillRect(x,y,width,height) 填充矩形
  • clearRect(x,y,w,h) 清除矩形 (矩形范围内的内容会被擦除)

圆形(圆弧)

  • arc(x,y,r,start, end, wise) 绘制圆弧
  • start/end是起始位置 单位是 弧度 , 360角度 = 2PI, 180角度 = PI
  • 最后一个参数 顺时针(false)/逆时针(true) 默认false

内容

文字方法

  • strokeText(text, x, y) 描边写字
  • fillText(text, x, y) 填充写字
  • measureText(text) 返回对象 包换文本的宽度
  • font 属性 设置 大小、字体 如 cxt.fon="100px MicrosoftYaHei";
  • textAlign 属性 水平对齐方式 start(默认)/end/center/left/right
  • textBaseline 属性 垂直对齐方式 alphabetic(默认)/top/bottom/middke/hanging/ideographic

绘制图片(插入图片)

插入图片

drawImage(img, x, y)

  • img image的dom元素
  • x,y 插入到 画布的位置 坐标

插入图片并改变大小

drawImage(img, x, y, width, height)

插入裁剪后的图片

drawImage(img, sx,sy,swidth,sheight, x, y, width, height)

  • sx/sy: 图片上开始裁剪的位置
  • swidth/sheight : 裁剪图片的大小

阴影

  • shadowColor 阴影颜色
  • shadowBlur 阴影的模糊值
  • shadowOffsetX 阴影的左偏移量
  • shadowOffsetY 阴影的右偏移量

渐变

线性渐变

var grd = cxt.createLinearGradien(x, y, x1, y1);
//参数:x,y起始坐标,x1,y1结束坐标
例如:
//创建线性渐变的对象,
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black"); //添加一个渐变颜色,第一个参数介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
grd.addColorStop(1,"white"); //添加一个渐变颜色
ctx.fillStyle =grd; //关键点,把渐变设置到 填充的样式

径向渐变

  • createRadiaGradient(x1, y1, r1, x2, y2, r2)
  • addColorStop()

把背景图片作为填充

  • createPattern(imgDom, repeate)
  • 第二个参数 repeate/ repeat-x / repeat-y / no-repeat

变换

缩放

  • sacle(x, y)

位移

  • translate(x, y)

旋转

  • rotate(angle)

环境的保存和恢复

  • save()
  • restore()

设置透明

  • globalAlpha = number 设置不透明度
  • 全局设置是对整个画布(绘图环境) 进行设置

限定绘图区域

  • clip()

输出base64编码

  • canvas.toDataURL(type, encoder)
  • type为mime类型 image/jpeg image/gif image/png image/webp

画布渲染画布

把一个画布以图片的形式用 drawImage() 插入到另一个画布
这是一种canvas的优化手段

设置线条

  • lineCap 属性 设置线条两端的形状 butt/round/square
  • lineJoin 属性 设置线条夹角 miter/bevel/round
  • miterLimit 属性 设置夹角斜角的最大长度 一般默认 10
HTML5 新增API
Web note ad 1