H5 Canvas详解与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/Rococoberry/article/details/104897499

一 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点击事件
        canvas.addEventListener("click",selectColor);
    };
    image.src="./img/bg.jpg";
</script>