Canvas学习笔记(一)


参考资料

  • 《JavaScript高级程序设计》

基本用法

  • 坐标轴
    Canvas坐标轴方向
  • 指定绘图区域大小
    <canvas id="drawing" width="200" height="200">
    your broswer is not supporting canvas.
    </canvas>
    
  • 取得绘图上下文
    var drawing  = document.getElementById('drawing');
    //确定浏览器支持
    if(drawing.getContext) {
    var context = drawing.getContext("2d");
    }
    
  • 获取画布的图像数据
    if(drawing.getContext) {
    var imgURI = drawing.toDataURL("image/png");
    var image = document.createElement("img");
    image.onload = function () {
      document.body.appendChild(image);
    }
    image.src = imgURI;
    }
    

    2D上下文

  • 填充和描边
    //描边
    context.strokeStyle = "red";
    //填充
    context.fillStyle = "#0000ff";
    
  • 绘制矩形
    //四个参数:x坐标,y坐标,矩形宽度,矩形高度
    // 红色填充矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10, 10, 50, 50);
    // 红色描边矩形
    context.strokeStyle = "#ff0000";
    context.strokeRect(30, 30, 50, 50);
    // 清除指定位置指定大小矩形区域
    context.clearRect(40, 40, 10, 10);
    
  • 绘制路径
    • 绘制弧线arc(x, y, radius,startAngle, endAngle, counterclockwise): 最后一个参数表示是否按逆时针方向计算
    • 从上一点绘制弧线arcTo(x1, y1, x2, y2, radius): 表示穿过(x1, y1), (x2, y2)且半径为radius的一条弧线
    • 绘制bezier曲线bezierCurveTo(c1x, c1y, c2x, c2y, x, y): (c1x, c1y), (c2x, c2y)为控制点,从上一点绘制曲线到(x, y)
    • 绘制直线lineTo(x, y):从上一点绘制到(x, y)
    • 移动游标moveTo(x, y):不画线
    • 绘制二次曲线quadraticCurveTo(cx, cy, x, y):从上一点绘制一条二次曲线,(cx, cy)为控制点
    • 绘制矩形路径rect(x, y, width, height):是路径而不是描边矩形!
  • 路径操作方法
    • beginPath():开始绘制路径
    • closePath():绘制连接到路径起点的线条
    • fill():填充路径
    • stroke():路径描边
    • clip():创建剪切区域
  • 绘制文本
    • font: 字体
    • textAlign:文本对齐方式,start, end, left, right, center
    • textBaseline:文本基线,top, hanging, middle, alphabetic, ideographic, bottom
    • fillText():填充文本
    • strokeText():文本描边
  • 变换
    • 绕原点旋转rotate(angle)
    • 在x,y方向上以倍数缩放scale(scaleX, scaleY)
    • 平移translate(x, y):坐标原点移动到点(x, y)
    • 使用矩阵变换transform(m11, m12m, m21, m22m dx, dy)
    • 重置变换矩阵setTransform(m11, m12m, m21, m22m dx, dy)
  • 状态
    • save()
    • restore()
  • 绘制图像——把一幅图像绘制到画布上

    // 获取image对象,DOM或者动态创建
    var image = document.image[0];
    // 绘制的起点位置(10, 10),图像大小20✖30
    context.drawImage(image, 10, 10, 20, 30);
    
    • drawImage(image, sx, sy, sw, sh, tx, ty, tw, th)
    • 将原图像(sx, sy)起始点大小为sw✖sh的图像绘制到画布上起始点为(tx, ty)大小为tw✖th的区域
    • 图像如果来自其他域,调用toDataURL会抛出一个错误,认为当前上下文被污染了
  • 阴影

    • shadowColor:阴影颜色
    • shadowOffsetX:形状或者路径x轴方向偏移量
    • shadowOffsetY:形状或者路径y轴方向偏移量
    • shadowBlur:模糊的像素度
  • 渐变

    //(30, 30)到(70, 70)的线性渐变
    var gradient = context.createLinearGradient(30, 30, 70, 70);
    // 创建放射渐变:两个圆的圆心及半径
    var gradient = context.createRadialGradient(10, 10, 5, 70, 70, 30);
    gradient.addColorStop(0, "white");
    gradient.addColorStop(1, "black");
    
  • 模式
    pattern = context.createPattern(image, "repeat");
    context.fillStyle = pattern;
    
    • 参数可以是image/video/Canvas
    • 重复方式:repeat / repeat-x / repeat-y / no-repeat
  • 合成
    • globalCompositionOperation
      • source-over(默认): 后绘制图形位于先绘制图行上方
      • source-in: 后绘制图形与先绘制图形重合部分可见,两者其余部分透明
      • source-out: 后绘制的图形与先绘制的图形不重叠部分可见,先绘制图形完全透明
      • source-atop:后绘制图形与先绘制图形重合部分可见,先绘制图形不受影响

文章作者: Susie Chang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Susie Chang !
 上一篇
Canvas学习笔记(二)—— 绘制2D宇宙星轨 Canvas学习笔记(二)—— 绘制2D宇宙星轨
参考资料Canvas学习笔记(一) 效果图 分析 确定画布中不动的元素:中心的星球,轨道 确定画布中移动的元素:绕中心星球旋转的行星 旋转用到的变换操作:rotate(弧度), 旋转变换速度函数:使用匀速旋转 确定最大半径,确定轨道条数
2018-11-01
下一篇 
Vue学习(四)之TypeScript重构 Vue学习(四)之TypeScript重构
参考资料typescript文档 TypeScript基础 TypeScript is a typed superset of JavaScript that compiles to plain JavaScript 概念:Ty
2018-10-29
  目录