canvas 基础

1.检查浏览器是否支持canvas

<canvas id="cv" width="500" height="300" style="border:1px solid #ccc"></canvas>
<script>
   var canvas = document.getElementById('cv');
　　if (canvas.getContext){
 　　 var ctx = canvas.getContext('2d');
　　} else {
  　　alert("您的浏览器不支持canvas");   //ie8不支持，显示弹框
　　}
</script>
 

2.绘制矩形

fillRect(x,y, width, height);  四个值分别是坐标xy 和矩形的宽高

canvas.fillStyle="#3a83cf";    //形状内部区域的颜色
canvas.strokeStyle="#ff8a10"; //边框颜色
canvas.fillRect(10,10,100,100);        //实心矩形
canvas.strokeRect(150,10,100,100);    //空心矩形

canvas.clearRect(20,20,10,10);    //清除该区域的像素 ，默认为白色

如图 白色小方块就是清除改位置的蓝色像素

3. 绘制路径

 数值为坐标

//1 
　    ctx.beginPath();    // 开始路径
    ctx.moveTo(1,1);
    ctx.lineTo(1,50);
    ctx.lineTo(100,50);
    ctx.lineTo(100,1);
　　//ctx.fillStyle="#f00" 设置填充颜色，颜色要写在fill()前面
    ctx.fill();    //填充路径内部，不写颜色默认是黑色 ，自动闭合结尾点与开始点

//2
　　ctx.beginPath();
    ctx.moveTo(60,10);
    ctx.lineTo(60,50);
    ctx.lineTo(100,50);
    ctx.lineTo(100,10);
    //ctx.closePath();   //stroke()不会自动闭合 ，而fill()会自动闭合 ，因此如果需要闭合都写上 .closePath();
　　//ctx.strokeStyle="#ff8a10" // 设置边框颜色，颜色要写在 stroke() 前面
    ctx.stroke();  //边框，不填写默认是黑色

如图： 

3.圆弧

ctx.arc(x, y, radius, starAngle,endAngle, anticlockwise)

　 x:圆心的x坐标

    y:圆心的y坐标

　radius：园的半径

    straAngle:开始角度

    endAngle:结束角度

    anticlockwise:是否逆时针（true）为逆时针，(false)为顺时针

//画圆弧也要结合beginPath() , closePath()  以及颜色和填充等 

ctx.beginPath();
 ctx.arc(300,150,50,0,Math.PI*2,true);
 ctx.closePath();
 ctx.fillStyle="#0f0"
 ctx.fill();

    

 4.线性渐变

//渐变,
　　 var jianbian=ctx.createLinearGradient(0,0,20,200); //渐变开始点的坐标， 结束点的坐标 ；坐标方向可以为上下，左右，对角和其它等 
    jianbian.addColorStop(0, '#ff0000');  //渐变的颜色 （0到1 可设置多个颜色）
    jianbian.addColorStop(1, '#0000ff');
    ctx.fillStyle = jianbian;    //填充的颜色为设置的渐变颜色
    ctx.fillRect(10, 10, 300, 300);  //填充的区域， 比如：渐变从画布的0,0 坐标开始 ， 但填充的矩形是10,10开始，表示有一部分渐变没看到，只显示填充矩形里的渐变

 

5.径向渐变

径向渐变 createRadialGradient(x0,y0,r0,x1,y1,r1) 

　起点圆心坐标（x0,y0）

   起点圆心半径（r0）

   终点圆心坐标（x1,y1）

   终点圆心​半径（r1）

//方形
　　var radial=ctx.createRadialGradient(50,50,20,50,50,50); //半径大小，习惯小的在里面，这里20表示半径20的区域全是红色，从20往外才开始渐变；后面的半径50表示最后一个颜色的开始位置
    radial.addColorStop(0,'#f00');
    radial.addColorStop(0.5,'#ff0');
    radial.addColorStop(1,'#00f'); 
    ctx.fillStyle = radial;
    ctx.fillRect(0,0,100,100);

//用圆形填充

var radial=ctx.createRadialGradient(50,50,1,50,50,50);
radial.addColorStop(0,'#f00');
radial.addColorStop(0.5,'#ff0');
radial.addColorStop(1,'#00f');
ctx.fillStyle = radial;
ctx.arc(50,50,50,0,Math.PI*2,true);
ctx.fill();

 

6.绘制文字

• font - 定义字体（大小，字体）
• fillText(text,x,y) - 在 canvas 上绘制实心的文本
• strokeText(text,x,y) - 在 canvas 上绘制空心的文本

　　var jianb=ctx.createLinearGradient(10,50,150,50);
    jianb.addColorStop(0, '#ff0000');  
    jianb.addColorStop(1, '#0000ff');
    ctx.font="30px 隶书"; //字体、大小
    ctx.fillStyle=jianb; //填充的颜色可以直接写，也可应采用渐变的颜色
    ctx.strokeStyle="#ff8a10" //边框的颜色 ，也可用渐变的颜色
    ctx.fillText("文本内容",10,50);
    ctx.strokeText("空心文字",10,80)

如图： 

7.插入图片

　　ctx.drawImage(img,x,y);　　 // x,y 表示图片在画布上开始的坐标，未设宽高则为原图大小

　　ctx.drawImage(img,x,y,width,height); 　　// 再设置图片宽高，无法自动等比例缩放

　　ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

　　// sx sy表示在原图上，开始剪切的坐标，swidth,sheight 表示在原图上剪切部分的宽和高 -->从而得出一块剪切的图片，再将剪切的图片插入到画布， 剩下参数说明如上两个

var canvas = document.getElementById('cv');
if (canvas.getContext){
  var ctx = canvas.getContext('2d'); 
} else {
  alert("浏览器不支持canvas")
}
img = new Image();
img.src="img/poster.jpg";　//图片路径
img.onload = function(){   //图片需加载完，否则画布上不显示
    ctx.drawImage(img,0,0);  
}

//图片平铺

img.onload = function(){
    for (var i=0;i<4;i++){
      for (var j=0;j<3;j++){
        ctx.drawImage(img,j*50,i*38,50,38);
      }
    }
};

 画线条图

//画线条图
img.onload = function(){
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.moveTo(30,96);
      ctx.lineTo(70,66);
      ctx.lineTo(103,76);
      ctx.lineTo(170,15);
      ctx.stroke();
   }