canvas 基础知识

时间：2022-10-31 15:05:14

canvas 基础

低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas.

检测支持canvas

<canvas id="canvas" width="150" height="200" >

	你的浏览器不支持canvas

</canvas>

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

if(canvas.getContext) alert('支持canvas');

api

绘制矩形

var canvas = document.getElementById('canvasnode');

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

ctx.fillRect(x, y, width, height); //绘制填充矩形 需先设置ctx.fillStyle = #a00;

ctx.strokeRect(x, y, width, height); //绘制描边矩形 需先设置ctx.strokeStyle = #ccc, ctx.lineWidth = 2;

ctx.clearRect(x, y, width, height); //清除矩形区域 ~常用来不断的清空画布和重绘来实现动画效果

注：canvas的尺寸最好通过 标签内的width, height设置，用css设置的话效果类似放大了画布和画布上的内容

绘制路径

ctx.beginPath(); //开始路径

路径是以一组子路径（直线、弧线等）的形式存储的，每次调用beginPath(),子路径组都会被重置，然后可以绘制新的图形

ctx.closePath(); //闭合路径 会尝试用直线连接当前端点和开始端点来闭合路径，若路径本身已闭合或只有1个点 则closePath()什么也不做，闭合路径不是必须的。

ctx.stroke(); //描边路径

ctx.fill(); //填充 开放路径将自动闭合，而无需调用ctx.closePath();

ctx.moveTo(x, y); //移动画笔

ctx.lineTo(x, y); //从当前上下文点画直线

ctx.arc(x, y, radius, startAngle, endAngle, antiClockwise); //绘制弧线或圆 角度(圆周上的每个点对应一个角度，顺时针方向增大 0.5* Math.PI为半圆的下端点，0*Math.PI为半圆的右端点)

绘制曲线 贝塞尔和二次方曲线

quadraticCurveTo(cx, cy, x, y); //3个点(上下文点 1个控制点 1个端点)

bezierCurveTo(cx1, cy1, cx2, cy2, x, y); //4个点 （上下文点 2个控制点 1个端点)

canvas中使用图像

//创建图片

var img = new Image();

img.onload = function(){

	context.drawImage(img, 100,100);

}

img.src = url;

~~ or img.src = dataUrl; 注意dataUrl方式加载的图片优点：图片即时显示不用http请求；缺点：不能被缓存

//如：img.src = 'data:image/gif;base64,R01GOD....'

//drawImage()渲染图片到canvas上。

drawImage(imageObj, x, y); //从哪个位置开始渲染图片

//图片缩放

drawImage(imageObj, x, y, width, height); //从哪个位置以多大尺寸渲染图片 width, height指图片的大小

图片切片 可以只渲染图片的一部分都canvas上 有点CSS sprite的味道

对图片裁切(切片)后，以指定的位置和大小渲染到画布

drawImage(imageObj, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); //切片开始位置，切片大小， 目标放置位置， 目标大小

半透明

context.globalAlpha = 0.3; //全局透明度

context.strokeStyle = 'rgba(255,0,0,0.3)'; //半透明颜色实现半透明度

context.fillStyle = 'rgba(255,0, 0, 0.3)';

线型 笔刷设置

ctx.lineWidth = "3"; //线条大小

ctx.lineCap = 'round'/'square'/'butt'; //线段端点样式

ctx.lineJoin = 'round'/'bevel'/'miter'; //两线段连接处的样式

ctx.miterLimit = "10"; //lineJoin = 'miter' 时，线段延长相交的最大值

渐变

var grd = context.createLinearGradient(x1, y1, x2, y2); //创建线性渐变 指定渐变起点和终点

var grd = context.createRadialGradient(x1, y1, r1, x2, y2, r2); //创建径向渐变 指定2个圆

创建渐变对象后,就可以用addColorStop()方法添加色标了。

grd.addColorStop(pos, color); pos：0~1的值

图案 图案填充

var pat = context.createPattern(image, type); // type: repeat / repeat-x /repeat-y / no-repeat

如：

var img = new Image();

img.onload = function(){

	var ptn = context.createPattern(img, 'repeat');

}

img.src = url;

阴影

context.shadowOffsetX = 2;

context.shadowOffsetY = 2;

context.shadowBlur = 2

context.shadowColor = 'rgba(0,0,0,0.5)';

保存和恢复canvas的状态

canvas状态栈, 调用context.save(),则当前状态入栈，调用context.restore()则顶端状态出栈，成为当前状态。

context.save()

context.restore()

canvas状态包括：

strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor

移动 translate

context.translate(x, y); //移动canvas的原点到新的位置

旋转 rotate

context.rotate(angle); //旋转canvas

缩放 scale

context.scale(xZoom, yZoom);

变形 transform 变换矩阵

context.transform(m11, m12, m21, m22, dx, dy);

变换矩阵为:

m11	m21 dx

m12 m22 dy

0 0	1

组合 compositing, 图形的组合

通常我们绘制多个图形时，总是一个图形绘制在另一个图形上，这样是不够的，图形的堆叠被绘制顺序限制

context.globalCompositeOperation = ..

~~ 当前绘制的图形是source, 之前存在的图形为destination

source-over: 默认值 新图形覆盖在旧的内容上。

destination-over: 原有内容在上面

source-in: 新图形与原有内容重叠部分，显示新图形的，其余部分透明

destination-in:

source-out: 新图形与原有内容不重叠部分，显示新图形的，其余部分透明

destination-out:

source-atop:新图形与原有内容重叠部分会被绘制，并覆盖在上面

destination-atop:新图形与原有内容重叠部分会被绘制，原有内容覆盖在上面

lighter: 两图形重叠部分加色

darker: 两图形重叠部分减色

xor: 重叠部分变透明

copy: 新图形被保留 其他的清除。

裁切路径 clip

context.beginPath();

context.arc(0, 0, 60, 0, 2 * Math.PI, true);

context.clip(); //绘制路径 然后裁切，从而控制绘图的范围

基本动画

canvas的动画是通过不断的重绘来实现的

绘制动画帧常用的操作

清空canvas

context.clearRect(x,y,width,height);

保存状态

context.save()

context.restore()

setTimeout, setInterval实现不断重绘

相关文章