canvas基础

标签

---

     

<canvas></canvas>

1. 使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸.
2. 默认 canvas 的宽高为 300 和 150.
3. 不要使用 CSS 的方式设置宽高, 应该使用 HTML 属性.
4. 如果浏览器不支持 canvas 标签, 那么就会将其解释为 div 标签. 因此常常在 canvas 中嵌入文本, 以提示用户浏览器的能力.
5. canvas 的兼容性非常强, 只要支持该标签的, 基本功能都一样, 因此不用考虑兼容性问题.
6. canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的 api.

使用领域

---

1. 游戏
2. 可视化数据(重点)
3. banner 广告
4. 多媒体
5. 未来
   • 模拟仿真
   • 远程操作
   • 图形编辑

绘图步骤

---

1. 获得 canvas 对象.
2. 调用 getContext 方法, 提供字符串参数 '2d'.
3. 该方法返回 CanvasRenderingContext2D 类型的对象. 该对象提供基本的绘图命令.
4. 使用 CanvasRenderingContext2D 对象提供的方法进行绘图.
5. 基本绘图命令
   • 设置开始绘图的位置: context.moveTo( x, y ).
   • 设置直线到的位置: context.lineTo( x, y ).
   • 描边绘制: context.stroke().
   • 填充绘制: context.fill().
   • 闭合路径: context.closePath().

方法

---

getContext()

- 作用：获取绘图上下文
- 语法：canvas.getContext('2d' || 'webgl');

   
   

    
    
     
     
        var cvs = document.querySelector('canvas');
        var ctx = cvs.getContext('2d');
   
   

moveTo()

- 作用：设置路径的起点

   
   

    
    
     
     
        ctx.moveTo(x, y);
   
   

lineTo()

- 作用：画子路径

   
   

    
    
     
     
        ctx.lineTo(100, 150);
        ctx.lineTo(150, 150);
        ctx.lineTo(150, 100);
   
   

stroke()

- 作用：根据当前路径描边

   
   

    
    
     
     
    ctx.stroke();
   
   

fill()

- 作用：根据当前路径填充

   
   

    
    
     
     
    ctx.fill();
   
   

beginPath()

- 作用：清除当前路径(开辟一条新路径)
- 语法：ctx.beginPath();

closePath()

- 作用：当前路径的结束点与起点连一条子路径
- 语法：ctx.closePath();

clearRect()

- 作用：以矩形的区域清除画布内容
- 语法：ctx.clearRect(x, y, w, h);

rect()

- 作用：画矩形路径
- 语法：ctx.rect(x, y, w, h);

strokeRect()

- 作用：直接绘制一个描边矩形，不会产生路径
- 语法：ctx.strokeRect(x, y, w, h);

fillRect()

- 作用：直接绘制一个填充矩形，不会产生路径
- 语法：ctx.fillRect(x, y, w, h);

arc()

- 作用：画弧路径
- 语法：ctx.arc(x, y, r, startRadius, endRadius, 是否逆时针(可选));

setLineDash([])

- 作用：设置虚线样式
- 语法：ctx.setLineDash(任意长度的数组);

   
   

    
    
     
     
ctx.setLineDash([5, 1, 10]);
   
   
   
   

    
    

   
   

getLineDash()

- 作用：获取虚线样式
- 语法：ctx.getLineDash();

strokeText()

- 作用：绘制描边文字
- 语法：ctx.strokeText(text, x, y, 限制最大占用宽度(可选));

fillText()

- 作用：绘制填充文字
- 语法：ctx.fillText(text, x, y, 限制最大占用宽度(可选));

measureText()

- 作用：预测绘制一段文字需要占用的宽
- 语法：ctx.measureText(text)

strokeStyle

- 作用：设置描边样式

fillStyle

- 作用：设置填充样式

lineWidth

- 作用：设置线宽

lineCap

- 作用：设置线帽样式
- 语法：ctx.lineCap = 'butt' || 'round' || 'square'

lineJoin

- 作用：设置线交点样式
- 语法：ctx.lineJoin = 'miter' || 'round' || 'bevel'

miterLimit

- 作用：当lineJoin为miter的时候，限制延长线是线宽的多少被，默认是10倍

lineDashOffset

- 作用：设置虚线开始位置的偏移量

font

- 作用：设置字体相关样式

textAlign

- 作用：设置文字水平对其方法
- 语法：ctx.textAlign = 'left start' || 'center' || 'right end'

textBaseline

- 作用：设置文字垂直对其方法
- 语法：ctx.textBaseline = 'top' || 'hanging' || 'middle' || 'alphcbetic' || 'ideographic' || 'bottom'

width

- 作用：设置或者获取画布的宽

height

- 作用：设置或者获取画布的高