H5----canvas

一 canvas简介

  1. canvas是H5里的一个标签,引用格式为: <canvas id="canvas"></canvas>
    这里设置的ID类名称是:canvas;

二 canvas属性

  1. save:存储当前canvas画布的状态,存储在栈的最上面;
  2. restore:依次从栈的上方弹出canvas的状态;
  3. 做canvas动画注意:
    (1).要清空画布:clearRect(除非绘制整个背景);
    (2).考虑canvas是否保存:save;
    (3).绘制图形;
    (4).恢复状态。若保存了,先恢复canvas状态:restore,再绘制下一帧;
    (5).执行动画的计时器。
  4. isPointInPath():检测当前的坐标是否在形状内部;
  5. isPointInStroke():检测当前的坐标是否在描边之上;
  6. ctx=canvas.getContext(“2d”):设置canvas为二维画布;
  7. ctx.clearRect:清空画布,坐标设置的是需要清空的区域,若不设置参数则不起作用;
  8. ctx.scale(0.6,0.6):缩放当前绘图;
  9. ctx.translate(250,250):设置中心点;
  10. ctx.rotate(-(90*Math.PI/180)):旋转canvas画布;
  11. ctx.strokeStyle="#000":描边颜色;
  12. ctx.fillStyle="#fff":填充颜色;
  13. ctx.stroke():绘制描边的;
  14. ctx.lineWidth=8:宽度为 8 像素的线条来绘制;
  15. ctx.lineCap=“round”:绘制的线两端是圆弧;
  16. context.clip():剪裁;
  17. context.fillRect(0,0,100,50):绘制一个矩形,起始坐标+终止坐标;
  18. context.fill():填充绘制的路径;
  19. context.arc(350,200,100,0,Math.PI*2,true):绘制圆弧,起始坐标+终止坐标;
  20. context.arcTo(600,250,660,300,50):圆弧:起始坐标+终止坐标+圆弧半径;
  21. context.beginPath():开始路径;
  22. context.closePath():闭合路径;
  23. context.moveTo(0,200):起始点;
  24. context.lineTo(200,200):移动点;
  25. var line=context.createLinearGradient(200,100,200,200):绘制线性渐变,起始坐标+终止坐标;
  26. 添加线性渐变的颜色:
    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”);
  27. var arcgradient=context.createRadialGradient(350,200,10,350,200,100)
    :绘制圆形渐变,圆形渐变:前三个参数指定的是起点圆的原心(x和y)及半径,后三个参数指定的是终点圆的原心(x和y)及半径;
  28. 绘制图片:
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);
  1. 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值