三省吾身丶丶

三省吾身丶丶

马上订阅 三省吾身丶丶 RSS 更新: https://blog.guowenfh.com/atom.xml

从零学习 canvas (一)

2017年10月24日 23:10

由于上一篇描述的原因。有图像处理的需求，于是我就开始学习 canvas 啦，和以前的一样，这一篇也是一边学一边写，敲出来的。有不正确的地方，欢迎指出。
canvas 本身的 api 描述是比较简单，但是衍生出来的东西，操作，图像处理，动画，性能，还是非常的多的。所以对于 canvas 的学习不出意外的话，将会是一个系列。这就是第一篇了。下面就开始吧

前言

1
<canvas id="canvas" style="background:blue;">浏览器不支持canvas</canvas>

在不支持 canvas 的浏览器中，显示标签中的内容。
绘图区域 默认是 300 x 150。
canvas 中的宽高是实际的宽高，css 中的宽高会等比缩放。
在开始绘图之前需要先，获取绘图环境。

1
2
3
4
5
const canvas = document.querySelector('#canvas');
if(canvas.getContext){
    const context = canvas.getContext('2d');
    // .... 绘制
}

API

绘制方块

  • fillRect(x, y, width, height)：绘制矩形，默认黑色
  • strokeRect(x, y, width, height)：带边框的矩形，默认黑色，默认 1px 。但是显示出来可能有区别
  • clearRect(x, y, width, height)
    清除指定矩形区域，让清除部分完全透明。
    1
    2
    3
    4
    5
    6
    {
    // 边框实际上被加粗了
    context.strokeRect(100,100,50,50);
    // 正常边框 1px
    context.strokeRect(160.5,160.5,50,50); 
    }

设置绘图样式

  • fillStyle = color: 填充颜色（绘制 canvas 是有顺序的）
  • lineWidth = value: 线宽度，是一个数值
  • strokeStyle = color:边线颜色
1
2
3
4
5
6
7
{
context.strokeStyle='rgba(0,0,255,0.5)';
context.lineWidth=5;
// 调整 fillRect／ strokeRect 的顺序将有不一样的表现
context.strokeRect(160.5,160.5,50,50);
context.fillRect(160.5,160.5,50,50);
}

边界绘制

  • lineJoin = type:边界连接点样式
    • miter/默认;round/圆角;bevel/斜角
  • lineCaP = type:端点样式
    • butt/默认;round/圆角;square/高度多出未为宽一半的值

绘制路径

  • beginPath():开始绘制路径
  • closePath():结束绘制路径（,不是必需的）
  • moveTo(x,y):移动到绘制的点，坐标x以及y
  • lineTo(x,y):绘制一条从当前位置到指定x以及y位置的直线。
  • fill(): 填充
  • stroke(): 边框
1
2
3
4
5
6
7
8
9...
剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章