Canvas的基本使用

canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。
基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。
<canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。

体验Canvas

什么是Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建Canvas元素

向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：

1
2
3
4
5
6
<!--1.准备画布-->
<!--1.1 画布是白色的 而且默认300*150-->
<!--1.2 设置画布的大小  width="600" height="400" -->
<canvas width="600" height="400" ></canvas>
<!--2.准备绘制工具-->
<!--3.利用工具绘图-->
注意：canvas的大小要在标签内定义，否则会出现意料之外的效果。

Canvas坐标系

通过JavaScript来绘制

1
2
3
4
5
6
7
8
9
10
11
12
13
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取上下文 绘制工具箱 */
/*目前canvas只支持2d*/
/*若要达到3d效果，需要想象一个3d坐标系后，再投影到canvas上*/
/*或者配合WebGL达到3d效果*/
var context = myCanvas.getContext('2d');
/*设置绘图的起始位置*/
context.moveTo(100,100);
/*绘制路径*/
context.lineTo(200,200);
/*描边*/
context.stroke();

Canvas的基本使用

图形绘制

1、开启新的路径

1
ctx.beginPath();

2、画路径

1
2
3
ctx.moveTo(100,100);  //将画笔放置在100px 100px的位置
ctx.lineTo(200,100);  //从（100，100）向（200，100）画一条轨迹
ctx.lineTo(200,200);  //从（200，100）向（200，200）画一条轨迹

此时，是看不出线条的，因为此时仅仅是一条没有颜色的轨迹。

3、给路径描边（上色）

1
2
ctx.strokeStyle = "red"; //设置画笔颜色
ctx.stroke();  //开始描边

4、闭合路径

1
ctx.closePath();  //将路径的起点与终点连接

填充规则(非零环绕)

设置样式

画笔的状态

  • lineWidth 线宽，默认1

  • lineCap 线末端类型：(butt默认)、round、square

    lineJoin

  • lineJoin 相交线的拐点 miter(默认)、round、bevel

    lineJoin

  • strokeStyle 线的颜色

    1
    ctx.strokeStyle = "blue";

  • fillStyle 填充颜色

    1
    ctx.fillStyle  = "blue";

  • setLineDash() 设置虚线

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

    setLineDash方法规定虚线的特征，它的参数是一个具有两个元素的数组。

    第一个数组元素规定虚线尺寸，也就是我们可见的部分，比如上面的红色小线段。

    第二个数组元素规定虚线与虚线之间的间隔，通过线段与间隔交替出现，构成了一个完整的虚线。

  • getLineDash() 获取虚线宽度集合

    1
    console.log(ctx.getLineDash());

    打印结果：(2) [500, 10]

  • lineDashOffset 设置虚线偏移量（负值向右偏移）

    1
    2
    3
    4
    /*如果是正的值 往后偏移*/
    /*如果是负的值 往前偏移*/
    /*ctx.lineDashOffset = 10;*/
    ctx.lineDashOffset = -10;
线性颜色渐变填充

  • 利用循环绘制从黑道白道的渐变

    1
    2
    3
    4
    5
    6
    7
    8
    ctx.lineWidth = 30;
    for (var i = 0; i < 255; i++) {
        ctx.beginPath();
        ctx.moveTo(100+i-1,100);
        ctx.lineTo(100+i,100);
        ctx.strokeStyle = 'rgb('+i+','+i+','+i+')';
        ctx.stroke();
    }

  • createLinearGradient

    1、先利用createLinearGradient创建出一个颜色渐变的样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /*1、确定渐变方向*/
    /*渐变起点x  起点y   终点x  终点y*/
    /*由（100px,100px）渐变至（500,400px）*/
    var linearGradient = ctx.createLinearGradient(100,100,500,400);

    /*调节起始与终止点的位置  使之在水平对齐  渐变效果为由上而下渐变*/
    // var linearGradient = ctx.createLinearGradient(100,150,200,150);

    /*调节起始与终止点的位置  使之在垂直对齐  渐变效果为由左而右渐变*/
    // var linearGradient = ctx.createLinearGradient(250,100,250,200);

    /*2、确定渐变颜色*/
    /*位置（取值为0~1）   颜色*/
    linearGradient.addColorStop(0,'pink');
    linearGradient.addColorStop(0.5,'red');
    linearGradient.addColorStop(1,'blue');

    2、给画笔上渐变色！

    1
    ctx.fillStyle = linearGradient;

    3、填充

    1
    2
    ctx.rect(0,0,200,100);
    ctx.fill();  //对stroke()失效
径向颜色渐变填充

  • createRadialGradient(x0,y0,r0,x1,y1,r1,x2,y2,r2……)

    x0,y0,r0 第一个圆 圆心的x，圆心的y，圆心的半径

    。。。以此类推

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    //绘制一个以坐标点(100,100)为圆心、半径为50px的圆形
    ctx.arc(100, 100, 50, 0, Math.PI * 2, false);

    //创建一个表示放射性颜色渐变的CanvasGradient对象
    //该对象的作用域是以(100,100)为圆心、半径为10px的内圆和以(100,100)为圆心、半径为50px的外圆之间的环状区域
    var canvasGradient = ctx.createRadialGradient(100, 100, 10, 80, 100, 80);
    //在offset为0的位置(即内圆的圆圈处)添加一个蓝色的渐变
    canvasGradient.addColorStop(0, "blue");
    //在offset为0.5的位置(环状区域从内到外放射50%的中间位置)添加一个绿色的渐变
    canvasGradient.addColorStop(0.5, "pink");
    //在offset为0的位置(即外圆的圆圈处)添加一个红色的渐变
    canvasGradient.addColorStop(1, "orange");
    //将fillStyle的属性值设为该CanvasGradient对象
    ctx.fillStyle = canvasGradient;
    ctx.fill();

Canvas图形绘制

矩形绘制

  • rect(x,y,w,h) 只创造出矩形而不绘制（stroke fill），也不结束绘画

    1
    ctx.rect(100,100,200,100); //左上角x轴坐标  左上角y轴坐标 宽 高

  • strokeRect(x,y,w,h) 有独立路径，会自动绘制（stroke），自动结束绘画，不影响下次绘画。

  • fillRect(x,y,w,h) 有独立路径，不影响别的绘制

  • clearRect(x,y,w,h) 擦除矩形区域

圆弧绘制

arc(x,y,r,startAngle,endAngle,anticlockwise)

  • x 圆心横坐标
  • y 圆心纵坐标
  • r 半径
  • startAngle 开始角度
  • endAngle 结束角度
  • anticlockwise 是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）
1
2
context.arc(200,200,150,0,Math.PI/3,false);  //默认 顺时针
// context.arc(w/2,h/2,150,0,Math.PI/3,true);  //逆时针

扇形的绘制

1
2
3
4
5
6
ctx.moveTo(200,200);
// arc是紧接着上一次笔触的地方开始画
// ctx.beginPath();  //当重新开始路劲时效果会发生变化
ctx.arc(200,200,100,0,Math.PI/3,true);  //这里暗含着 lineTo(300,200);
ctx.closePath();
ctx.stroke();

绘制文本

  • ctx.font = ‘微软雅黑’ 设置字体
  • strokeText()
  • fillText(text,x,y,maxWidth)
    • text 要绘制的文本
    • x,y 文本绘制的坐标（文本左下角）
    • maxWidth 设置文本最大宽度，可选参数
  • ctx.textAlign文本水平对齐方式，相对绘制坐标来说的
    • left
    • center
    • right
    • start 默认
    • end
  • ctx.direction属性css(rtl ltr) start和end于此相关
    • 如果是ltr,start和left表现一致
    • 如果是rtl,start和right表现一致
  • ctx.textBaseline 设置基线（垂直对齐方式 ）
    • top 文本的基线处于文本的正上方，并且有一段距离
    • middle 文本的基线处于文本的正中间
    • bottom 文本的基线处于文本的证下方，并且有一段距离
    • hanging 文本的基线处于文本的正上方，并且和文本粘合
    • alphabetic 默认值，基线处于文本的下方，并且穿过文字
    • ideographic 和bottom相似，但是不一样
  • measureText() 获取文本宽度obj.width

贝塞尔曲线

数学公式

01base

02base

一个点确定曲线（一次）

bezier02

两个点确定曲线（二次）

bezier03

三个点确定曲线（三次）

bezier04

1
<canvas id="canvas" width="500px" height="500px"></canvas>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//1.拿到画布
var canvas = document.getElementById("canvas");
//2.拿到画布的上下文
var context = canvas.getContext('2d');

//3.一次贝塞尔曲线
context.beginPath();
context.moveTo(300,100);
context.quadraticCurveTo(100, 100, 300, 300);
context.stroke();

//4.二次贝塞尔曲线
context.beginPath();
context.moveTo(300,100);
context.bezierCurveTo(100, 100, 300, 300,200,400);
context.stroke();

做动画

绘制图片

创建图片对象
1
2
var img = new Image();
img.src = "./image/img1.jpg";
事件
1
2
3
4
//图片加载完毕 触发事件
img.onload() = function(){
	//ctx.drawImage();
}
方法
  • drawImage()
    • 三个参数drawImage(img,x,y)
      • img 图片对象、canvas对象、video对象
      • x,y 图片绘制的左上角
    • 五个参数drawImage(img,x,y,w,h)
      • img 图片对象、canvas对象、video对象
      • x,y 图片绘制的左上角
      • w,h 图片绘制尺寸设置(图片缩放，不是截取)
    • 九个参数drawImage(img,x,y,w,h,x1,y1,w1,h1)
      • img 图片对象、canvas对象、video对象
      • x,y,w,h 图片中的一个矩形区域（从图片上截取一部分）
      • x1,y1,w1,h1 画布中的一个矩形区域

坐标变换

  • 平移 移动画布的原点
    • translate(x,y) 参数表示移动目标点的坐标
  • 缩放
    • scale(x,y) 参数表示宽高的缩放比例
  • 旋转
    • rotate(angle) 参数表示旋转角度

绘制帧动画

最后更新： 2019年09月02日 11:00

原始链接： https://HowlCN1997.github.io/2019/08/19/canvas的基本使用/

赏
× 请我吃糖~
打赏二维码