canvas 基本绘制、矩形、渐变、阴影、全局透明度、图层、保存还原绘图状态
canvas
用来'替代'flash等其他用于做动画或游戏的插件的一个标签
1、可以理解为div,提供一个区域用来绘制图形
2、习惯在标签上对其大小进行设置，而不是css或js,并且标签中添加文本
原因:支持canvas标签会显示正常的绘制图形,不支持canvas标签的会输出文本
3、内部所有内容或图形需要通过js来完成
4、生成js画笔; let bi=canvas对象.getContext('2d/3d');
let bi=canvas对象.getContext(type,{attrs});
type:
'2d'、'webgl'或'experimental-webgl'、'webgl2'、'bitmaprenderer'
attrs:
alpha 如果设置为false,则表示Canvas不支持全透明或者半透明,在绘制带有透明效果的图形或者图像时候速度会更快一些。
type='webgl'时:
alpha 表示Canavs是否包含透明缓冲区。
antialias 表示是否需要抗边缘锯齿,如果设置为true,图像呈现质量会好一些,但是速度会拖慢。
depth 表示绘制缓冲区的缓冲深度至少16位。
failIfMajorPerformanceCaveat 表示如果用户的系统性能比较差,是否继续常见绘制上下文。
powerPreference 高速用户使用的客户端(如浏览器)我们现在这个WebGL上下文最合适的GPU配置是什么。支持下面关键字值：
'default' 让用户的客户端设备自己觉得那个GPU配置是最合适的。这个是此参数的默认值。
'high-performance' 渲染性能优先,通常更耗掉(如手机,平板等移动设备)。
'low-power' 省电优先,渲染性能权重可以低一些。
premultipliedAlpha 表示页面合成器将假定绘图缓冲区包含具有alpha预乘(pre-multiplied alpha)颜色。
preserveDrawingBuffer 如果值为true,则不会清除缓冲区并保留其值,直到作者清除或覆盖。
stencil 表示绘图缓冲区具有至少8位的模板缓冲区。
在屏幕外渲染Canvas画布专为WebGL设计
let offscreen = new OffscreenCanvas(256, 256);
5、全局canvas元素
HTMLCanvasElement 对应canvas标签,可以往原型上自定义属性,使得所有canvas对象都能使用
其他:HTMLDivElement 对应div标签
HTMLCanvasElement.prototype.isSomeAlphaPixel = function () {
var context = this.getContext('2d');
// 获取图片像素信息
var imageData = context.getImageData(0, 0, this.width, this.height).data;
...
};
特征
1、上屏即像素化
即画的内容无法改变,脱离文本流
2、fps
frame per second即每秒加载多少帧/画
3、差异化
根据所选绘制方式是fill还是stroke来决定是画框/环/线还是填充等,lineWidth等会设置圆环宽度
绘制方法
bi.fillStyle='style'|渐变色对象|pattern填充对象; 设置区域填充样式
bi.fill(); 开始填充
bi.strokeStyle='style'|渐变色对象|pattern; 设置边框、线条、文字样式
bi.stroke(); 开始绘制
其中:
pattern:元素可以是图片、视频,或者其他 矩形为目标图像
保存还原绘图状态:
只是保存save之前的状态,而不是图案效果,及restore还原后还需要重新绘图
ctx.save() 保存当前Canvas画布状态并放在栈的最上面,保存的状态有
当前矩阵变换。参见transform()等。
当前剪裁区域。参见clip()。
当前虚线设置。参见setLineDash()。
以及下面这些属性的值：strokeStyle，fillStyle，globalAlpha，lineWidth，lineCap，lineJoin，miterLimit，lineDashOffset，shadowOffsetX，shadowOffsetY，shadowBlur，shadowColor，globalCompositeOperation，font，textAlign，textBaseline。
ctx.store() 依次取出
例:
context.fillStyle = 'red';
context.fillRect(20, 20, 100, 60);
context.shadowColor='blue'
context.shadowBlur=20
context.save();
context.restore();
context.fillRect(180, 60, 100, 60);
代码示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.canvas{
border:solid 2px black;
}
</style>
</head>
<body>
<canvas width="300px" height="200px" class='canvas'>您的浏览器不支持canvas标签,请变更支持canvas的浏览器</canvas>
<script>
var canvas=document.querySelector('.canvas');
var bi=canvas.getContext('2d');
var num=20;
var fx=1;
var timer=setInterval(function(){
bi.fillStyle='pink';
if(num>=canvas.width-50)
{
fx=0;
}else if(num<=0){
fx=1;
}
if(fx==1){
console.log(fx,':'+num);
bi.clearRect(num,10,50,50);
bi.fillRect(++num,10,50,50);
}else{
bi.clearRect(0,0,300,200);
bi.fillRect(--num,10,50,50);
}
},25) //fps=40;
</script>
</body>
</html>