canvas及其方法

  1. canvas的设置(注意 : 不要在CSS上设置canvas的宽高,要在标签内部设置)
<canvas width="500" height="400"></canvas>
<script>
var ctx = canvas.getContext("2d");
</script>
  1. canvas绘制矩形
    a)绘制填充矩形 : ctx.fillRect (10, 10, 55, 55);(起始点10,10 ; 终止点 55,55)
    b)给矩形填充颜色 : ctx.fillStyle = “rgb(200,0,0)”;
    c) 绘制矩形边框 : ctx.strokeRect(50,50,100,100);
    d) 清除矩形区域 : ctx.clearRect(x, y, width, height)
    e) 设置边框颜色 : ctx.strokeStyle=“red”;
    f)设置透明度 : ctx.globalAlpha=0.5;

  2. createLinearGradient(x1, y1, x2, y2) : 返回一个canvasGradient对象
    在这里插入图片描述

 var color=ctx.createLinearGradient(100,100,900,100);
       color.addColorStop(0,"#FF0000");
       color.addColorStop(0.16,"#FFFF00");
       color.addColorStop(0.32,"#00FF00");
       color.addColorStop(0.48,"#00FFFF");
       color.addColorStop(0.64,"#0000FF");
       color.addColorStop(0.8,"#FF00FF");
       color.addColorStop(1,"#FF0000");
        ctx.fillStyle=color;
        ctx.fillRect(100,100,800,50);
  1. createRadialGradient(x1, y1, r1, x2, y2, r2) : reateRadialGradient 方法接受 6 个参数,前三个定义一个以 (x1,y1) 为原点,半径为 r1 的圆,后三个参数则定义另一个以 (x2,y2) 为原点,半径为 r2 的圆。

在这里插入图片描述

 var color=ctx.createRadialGradient(200,200,10,200,200,100);
       color.addColorStop(0,"#FF0000");
       color.addColorStop(0.16,"#FF00FF");
       color.addColorStop(0.32,"#0000FF");
       color.addColorStop(0.48,"#00FFFF");
       color.addColorStop(0.64,"#00FF00");
       color.addColorStop(0.8,"#FFFF00");
       color.addColorStop(1,"#FF0000");
    ctx.fillStyle=color;
    ctx.fillRect(100,100,200,200);
  1. createPattern(image, type) : 图案填充
    type : 1. repeat , 2. repeat-x , 3.repeat-y , 4. no-repeat
   var img=new Image();
        img.src="./img/IMG_20170529_115817.jpg";
       img.addEventListener("load",loadHandler);
       function loadHandler(e){
        var fill=ctx.createPattern(img,"no-repeat");
        ctx.fillStyle=fill;
        ctx.fillRect(0,0,200,200);
       }
  1. 阴影 :

    a) shadowOffsetX : x偏移
    b) shadowOffsetY : y偏移
    c) shadowBlur : 模糊
    d) shadowColor : 颜色

 ctx.fillStyle=fill;
        ctx.shadowOffsetX=2;
        ctx.shadowOffsetY=2;
        ctx.shadowBlur=2;
        ctx.shadowColor="#999999";
  1. 线条粗细 : ctx.lineWidth=10;
  2. lineCap : 线条线段端点样式 1.butt 2. round 3. square
  3. lineJoin : 两线段连接处所显示的样子 1. round 2. bevel 3.miter
  4. beginPath : 新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径
  5. closePath : 闭合路径之后图形绘制命令又重新指向到上下文中。
  6. moveTo(x,y) : 移动到开始点
  7. lineTo(x,y) : 绘制笔触线条到什么位置
  8. stroke() : 通过线条绘制图形轮廓
  9. fill() : 通过填充路径的内容区域生成实心的图形。
 ctx.lineCap="round";
    ctx.lineJoin="miter";
    ctx.strokeStyle="red";
    ctx.lineWidth=5;
    ctx.fillStyle="red";
    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.lineTo(300,300);
    ctx.lineTo(100,300);
    ctx.lineTo(100,100);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页