一 canvas简介
- canvas是H5里的一个标签,引用格式为:
<canvas id="canvas"></canvas>
这里设置的ID类名称是:canvas;
二 canvas属性
- save:存储当前canvas画布的状态,存储在栈的最上面;
- restore:依次从栈的上方弹出canvas的状态;
- 做canvas动画注意:
(1).要清空画布:clearRect(除非绘制整个背景);
(2).考虑canvas是否保存:save;
(3).绘制图形;
(4).恢复状态。若保存了,先恢复canvas状态:restore,再绘制下一帧;
(5).执行动画的计时器。 - isPointInPath():检测当前的坐标是否在形状内部;
- isPointInStroke():检测当前的坐标是否在描边之上;
- ctx=canvas.getContext(“2d”):设置canvas为二维画布;
- ctx.clearRect:清空画布,坐标设置的是需要清空的区域,若不设置参数则不起作用;
- ctx.scale(0.6,0.6):缩放当前绘图;
- ctx.translate(250,250):设置中心点;
- ctx.rotate(-(90*Math.PI/180)):旋转canvas画布;
- ctx.strokeStyle="#000":描边颜色;
- ctx.fillStyle="#fff":填充颜色;
- ctx.stroke():绘制描边的;
- ctx.lineWidth=8:宽度为 8 像素的线条来绘制;
- ctx.lineCap=“round”:绘制的线两端是圆弧;
- context.clip():剪裁;
- context.fillRect(0,0,100,50):绘制一个矩形,起始坐标+终止坐标;
- context.fill():填充绘制的路径;
- context.arc(350,200,100,0,Math.PI*2,true):绘制圆弧,起始坐标+终止坐标;
- context.arcTo(600,250,660,300,50):圆弧:起始坐标+终止坐标+圆弧半径;
- context.beginPath():开始路径;
- context.closePath():闭合路径;
- context.moveTo(0,200):起始点;
- context.lineTo(200,200):移动点;
- var line=context.createLinearGradient(200,100,200,200):绘制线性渐变,起始坐标+终止坐标;
- 添加线性渐变的颜色:
line.addColorStop(0,“blue”);
line.addColorStop(0.2,“red”);
line.addColorStop(0.4,“green”);
line.addColorStop(0.6,“orange”);
line.addColorStop(0.8,“yellow”);
line.addColorStop(1,“pink”); var arcgradient=context.createRadialGradient(350,200,10,350,200,100)
:绘制圆形渐变,圆形渐变:前三个参数指定的是起点圆的原心(x和y)及半径,后三个参数指定的是终点圆的原心(x和y)及半径;- 绘制图片:
var img=new Image();
img.src="https://fc3tn.baidu.com/it/u=3025909226,1763324618&fm=202&src=bqdata";
context.drawImage(img,0,0,700,400);
- context.transform(1,1,0.5,1,0,100):设置整体变形。6个参数为:水平缩放、水平斜切、垂直斜切、垂直缩放、水平位移、垂直位移。若设置为:1,0,0,1,0,0 和原来的造型一致;
三 小案例—提取颜色
<script>
var canvas=document.querySelector("#canvas");
var colorele=document.querySelector("#color");
canvas.width=800;
canvas.height=500;
var ctx=canvas.getContext("2d");
var image=new Image();
image.onload= function () {
ctx.drawImage(this,0,0,800,500);
function selectColor(e){
var layerx= e.layerX;
var layery= e.layerY;
var layer=ctx.getImageData(layerx,layery,1,1).data;
var opacity=layer[3]/255;
var color=`rgba(${layer[0]},${layer[1]},${layer[2]},${opacity})`;
colorele.style.backgroundColor=color;
}
canvas.addEventListener("click",selectColor);
};
image.src="./img/bg.jpg";
</script>