【Web2D/3D】Canvas(第三篇)

1. 前言

        是HTML5新增元素,它是一个画板,开发人员基于它的2D上下文或webgl上下文,使用JS脚本绘制简单的动画、可交互画面,甚至进行视频渲染。

        本篇介绍基于canvas的2D上下文绘制2D画面的一些方法和属性。

2. canvas元素

        2D坐标系:左上点是坐标原点(0,0),x轴正方向向右,y轴正方向向下,x正方向为弧度0。

        视口viewport:canvas宽高确定视口大小,默认宽高(300px, 150px)。

        canvas元素是HTMLCanvasElement实例化对象,以下列出HTMLCanvasElement原型对象的方法和属性。

方法和属性 描述 示例

HTMLCanvasElement

.prototype.getContext()

功能:获取一个渲染上下文

输入:‘2d’ | 'webgl' | 'experimental-webgl'

输出:CanvasRenderingContext2D

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

HTMLCanvasElement

.prototype.toDataURL()

<略> <略>

HTMLCanvasElement

.prototype.toBlob()

<略> <略>

HTMLCanvasElement

.prototype.captureStream()

<略> <略>

HTMLCanvasElement

.prototype

.transferControlToOffscreen()

<略> <略>

HTMLCanvasElement

.prototype.width

功能:设置画布的宽度,默认300px,不建议使用css设置width

width="500" height="450">

  不支持canvas

HTMLCanvasElement

.prototype.height

功能:设置画布的高度,默认150px,不建议使用css设置height

ctx是CanvasRenderingContext2D的实例化对象,CanvasRenderingContext2D原型对象的方法和属性如下。

方法和属性 描述 示例
绘制矩形

CanvasRenderingContext2D

.prototype.fillRect(x,y, width, height)

功能:绘制一个填充矩形

输入:

x 矩形左上角x轴坐标

y 矩形左上角y轴坐标

width 矩形宽度

height 矩形高度

ctx.fillStyle = "rgb(200,0,0)";

ctx.fillRect (10, 10, 55, 50);

CanvasRenderingContext2D

.prototype.strokeRect(x,y, width, height)

功能:绘制一个描边矩形

输入:同fillRect的参数

ctx.strokeRect(10, 70, 55, 50);

CanvasRenderingContext2D

.prototype.clearRect(x,y, width, height)

功能:清除指定的矩形区域,清除后这块区域变透明

输入:同fillRect的参数

ctx.clearRect(15, 15, 50, 25);
绘制路径

CanvasRenderingContext2D

.prototype.beginPath()

功能:新建一条路径

输入:无

ctx.beginPath(); ctx.moveTo(50, 50);

ctx.lineTo(200, 50);

ctx.lineTo(200, 200);

ctx.closePath();

ctx.stroke();

// 绘制出一个三角形

ctx.beginPath(); ctx.moveTo(50, 50);

ctx.lineTo(200, 50);

ctx.lineTo(200, 200);

ctx.fill();

// 绘制出一个三角形,并填充黑色

CanvasRenderingContext2D

.prototype.moveTo(x,y)

功能:移动画笔到坐标x,y

输入:

x 位置的x轴坐标

y 位置的y轴坐标

CanvasRenderingContext2D

.prototype.lineTo(x,y)

功能:定义一条从当前位置到目标点x,y的直线

输入:

x 目标点的x轴坐标

y 目标点的y轴坐标

CanvasRenderingContext2D

.prototype.closePath()

功能:闭合路径

CanvasRenderingContext2D

.prototype.stroke()

功能:绘制路径

CanvasRenderingContext2D

.prototype.fill()

功能:填充闭合区域,如果路径未闭合,fill()会自动将路径闭合

CanvasRenderingContext2D

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

功能:绘制圆弧,以x,y为圆心,以r为半径,从startAngle弧度开始到endAngle弧度结束,anticlockwise true表示逆时针,false表示顺时针,默认false

注:弧度0表示x轴正方向

ctx.beginPath();

ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);

ctx.closePath();

ctx.stroke();

ctx.beginPath();

ctx.arc(150, 150, 40, 0, Math.PI, false);

ctx.fill();

CanvasRenderingContext2D

.prototype.arcTo(x1, y1, x2, y2, radius)

功能:绘制圆弧,以x1,y1和x2,y2为控制点,以radius为圆弧半径

注:圆弧与当前点到x1,y1直线,以及x1,y1到x2,y2直线相切

ctx.beginPath(); ctx.moveTo(50, 50); ctx.arcTo(200, 50, 200, 200, 100);

ctx.lineTo(200, 200) ctx.stroke();

CanvasRenderingContext2D

.prototype.quadraticCurveTo(cpx1, cpy1, x, y)

功能:以cpx1,cpy1为控制点,以x,y为终点,绘制二次贝塞尔曲线

ctx.beginPath(); ctx.moveTo(10, 200);

const cpx1=40, cpy1=100;

const x=200, y=200;

ctx.quadraticCurveTo(cpx1, cpy1, x, y);

ctx.stroke();

CanvasRenderingContext2D

.prototype.bezierCurveTo(cpx1,cpy1, cpx2, cpy2, x, y);

功能:以cpx1,cpy1和cpx2,cpy2为控制点,以x,y为终点,绘制三次贝塞尔曲线

ctx.beginPath(); ctx.moveTo(40, 200);

const cpx1=20, cpy1=100;

const cpx2=100, cpy2= 20;

const x=200, y=200; ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); ctx.stroke();

CanvasRenderingContext2D

.prototype.getLineDash()

功能:获取当前虚线样式

输入:无

输出:Array

ctx.setLineDash([20, 5]); ctx.lineDashOffset = 0; ctx.strokeRect(50, 50, 210, 210);

const arr = ctx.getLineDash()

CanvasRenderingContext2D

.prototype.setLineDash(widthArr)

功能:设置线段与间隙长度的交替

输入:Array

CanvasRenderingContext2D

.prototype.lineDashOffset = offset

功能:设置起始偏移量

CanvasRenderingContext2D

.prototype.fillStyle = color

功能:设置图形填充颜色,默认黑色

输入:color 颜色值 | 渐变对象 | 图案对象

ctx.fillStyle = "rgb(200,0,0)";

ctx.fillRect (10, 10, 55, 50);

CanvasRenderingContext2D

.prototype.strokeStyle = color

功能:设置图形描边颜色,默认黑色

输入:color 颜色值 | 渐变对象 | 图案对象

ctx.strokeStyle = "rgb(200,0,0)";

ctx.strokeRect (10, 10, 55, 50);

CanvasRenderingContext2D

.prototype.lineWidth = width

功能:设置线宽度,正值,默认1.0,起点和终点连续中心,上下线宽各占一半

ctx.beginPath();

ctx.moveTo(10, 10);

ctx.lineTo(100, 10);

ctx.lineTo(100, 100);

ctx.lineWidth = 10;

ctx.lineCap = 'round';

ctx.lineJoin = 'miter';

ctx.stroke();

CanvasRenderingContext2D

.prototype.lineCap = type

功能:线条末端样式

输入:butt | round | square

CanvasRenderingContext2D

.prototype.lineJoin = type

功能:同一个path内,设置线条和线条间接合处的样式

输入:round | bevel | miter

绘制文本

CanvasRenderingContext2D

.prototype.fillText(text, x, y, maxWidth?)

功能:在指定位置x,y填充指定文本text,绘制最大宽度可选

ctx.font = "100px sans-serif"; ctx.fillText("热爱技术", 10, 100);

ctx.strokeText("热爱技术", 10, 200)

CanvasRenderingContext2D

.prototype.strokeText(text, x, y, maxWidth?)

功能:在指定位置x,y描边指定文本text,绘制最大宽度可选

CanvasRenderingContext2D

.prototype.font = font

功能:绘制文本的样式,默认'10px sanf-serif'

CanvasRenderingContext2D

.prototype.textAlign = align

功能:文本对齐方式,默认alphabetic

输入:top | hanging | middle | alphabetic | ideographic | bottom

CanvasRenderingContext2D

.prototype.direction = direction

功能:文本方向,默认inherit

输入:ltr | rtl | inherit

绘制图像

CanvasRenderingContext2D

.prototype.drawImage(image, x, y, width?, heigth?)

功能:绘制图片

输入:

image: HTMLImageElement,

x 开始绘制位置的x轴坐标

y 开始绘制位置的y轴坐标

width 绘制的图片宽度

height 绘制的图片高度

注:Image继承于HTMLImageElement

CanvasRenderingContext2D

.prototype.drawImage(image, sx, sy, sWidth, sHeigth, dx, dy, dWidth, dHeigth)

功能:绘制图片

输入:

image: HTMLImageElement,

sx,sy,sWidth,sHeight 从源图像扣图位置和大小

dx,dx,dWidth,dHeight 在canvas目标中显示位置和大小

状态的保存和恢复

CanvasRenderingContext2D

.prototype.save()

功能:将canvas当前状态保存到栈中,入栈

ctx.fillRect(0, 0, 150, 150); ctx.save(); 

ctx.restore();

CanvasRenderingContext2D

.prototype.restore()

功能:将上一次保存的状态从栈弹出,出栈

变换

CanvasRenderingContext2D

.prototype.translate(x,y)

功能:将canvas原点移动到指定位置x,y

输入:

x 目标位置的x轴坐标

y 目标位置的y轴坐标

ctx.save();

ctx.translate(100, 100);

ctx.strokeRect(0, 0, 100, 100) ctx.restore();

ctx.translate(220, 220);

ctx.fillRect(0, 0, 100, 100);

CanvasRenderingContext2D

.prototype.rotate(angle)

功能:将canvas坐标轴顺时针旋转一个角度

ctx.fillStyle = "red";

ctx.save();

ctx.translate(100, 100);

ctx.rotate(Math.PI / 180 * 45);

ctx.fillStyle = "blue";

ctx.fillRect(0, 0, 100, 100);

ctx.restore(); ctx.save();

ctx.translate(0, 0);

ctx.fillRect(0, 0, 50, 50)

ctx.restore();

CanvasRenderingContext2D

.prototype.scale(x,y)

功能:将canvas坐标轴横纵按比例缩放

输入:

x x轴缩放比例

y y轴缩放比例

CanvasRenderingContext2D

.prototype.transform(a,b,c,d,e,f)

a c e

b d f 

0 0 1

功能:变换矩阵

a x轴缩放比例 

b x轴skew

c y轴skew

d y轴缩放比例

e x轴平移量

f y轴平移量

ctx.transform(1, 1, 0, 1, 0, 0);

ctx.fillRect(0, 0, 100, 100);

合成

CanvasRenderingContext2D

.prototype.globalCompositeOperation 

= type

功能:设置图形合成方式,默认不设置,新图像覆盖原图像

输入:

1. soure-in 仅新图像与老图像重叠部分,其它区域透明

2. soure-out 新图像与老图像不重叠部分,老图像不显示

3. source-atop 新图像仅显示与老图像重叠部分,老图像仍显示

4. destination-over 新图像在老图像下面

5. destination-in  仅老图像与新图像重叠部分,其它区域透明

6. destination-out 老图像与新图像不重叠部分,新图像不显示

7. destination-atop: 老图像仅显示重叠部分,新图像在老图像下面

8. lighter 新老图像都显示,相加操作

9. darken 保留重叠部分最黑的像素,位与操作

10. lighten 保留重叠部分,位域操作

11. xor,异或操作

12. copy 仅新图像保留,其它区域透明

<略>
裁剪路径

CanvasRenderingContext2D

.prototype.clip()

功能:将已创建的路径转换成裁剪路径,仅显示裁剪区域,隐藏裁剪路径外的区域

<略>

有兴趣的同学可以参见:学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程 (runoob.com)

注:以上,如有不合理之处,还请帮忙指出,大家一起交流学习~  

你可能感兴趣的:(前端开发,3d)