canvas快速入门(一)绘制简单的 矩形 圆形

设置canvas绘板

<canvas width="400" height="300"></canvas>

获取canvas元素

    var canvas = document.querySelector("canvas");

获取绘板

var ctx = canvas.getContext("2d");

设置背景色

ctx.fillStyle = "red";

绘制矩形

// 参数  绘制的位置
ctx.fillRect(0,0,200,200);

擦掉部分矩形

 在x100 和 y100 位置删除100*100的矩形 
ctx.clearRect(100,100,100,100);

全部擦掉

ctx.clearRect(0,0,canvas.width,canvas.height);

绘制矩形边线

 ctx.strokeRect(99,99,101,101);

动画产生

    var x = 0;
    var y = 0;
    var speedX = 2;
    var speedY = 3;
    setInterval(animation,16);
    function animation(){
        if(x>canvas.width-50 || x<0)speedX=-speedX;
        if(y>canvas.height-50 || y<0) speedY=-speedY;
        x+=speedX;
        y+=speedY;
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.fillRect(x,y,50,50);
    }

    ctx.clearRect(0,0,canvas.width,canvas.height);

样式和颜色

笔触颜色

    ctx.strokeStyle = "red";
    ctx.strokeRect (0,0,50,50);

填充色

    ctx.fillStyle = "red";
    ctx.fillRect (0,0,50,50);

透明度

  //在绘制前设置
    ctx.globalAlpha = 1;

渐变

线性渐变过渡色

  // 参数 50,50,50,150  从上向下变色
    var  fill = ctx.createLinearGradient(50,50,150,150)
    // 参数 偏移值 颜色
    fill.addColorStop(0,"red");
    
    // 过渡色的位置
    // 参数 0.5 表示三分之一 
    // 0.75 二分之一  
    // 1 表示三分之二
    // 不能超过1
    fill.addColorStop(1,"#FFF000");
    ctx.fillStyle = fill;

放射渐变

// 参数 100   100  50 绘制辐射放射的半径  0 放射中心位置 0 放射中心位置 50  中心色彩放射半径
    var fill = ctx.createLinearGradient(100,100,50,0,0,50);
    fill.addColorStop(0,"red");
    fill.addColorStop(1,"#FFF000");
    ctx.fillStyle = fill;
    ctx.fillRect(0,0,100,100);

图案填充

 // 图片必须预加载
    var img = new Imag();
    img.addEventListener("load", loadHandler);
    img.src = "";

阴影

    function loadHandler(e){
        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 5;
        ctx.shadowBlur    = 2;
        ctx.shadowColor   = "#cccccc";
        ctx.fillStyle = ctx.createPattern(img,"repeat-x");
        ctx.fillRect(50,50,700,500);
    }

设置线条颜色

    ctx.strokeStyle = "red";
    ctx.lineWidth=5;
    ctx.strokeRect(50,50,100,100);

绘制字符串

设置字符串样式

	ctx.font = 'italic 50px 隶书';
    ctx.textBaseline = 'top';

填充字符串

    ctx.fillText('小智爱学编程',0,0);

绘制字符串边框

    ctx.strokeText('小智爱学编程',0,50,200);