HTML5 Canvas基础

现在前端Canvas用到的地方也是比较多的，下面来了解一下Canvas。

什么是Canvas及注意事项

使用Canvas绘图矩形

什么是Canvas及注意事项

Canvas：画布，是H5提供2D绘图技术

<canvas width="500" height="400"> 您的浏览器不支持canvas标签! </canvas>

var ctx = canvas.getContext("2d"); //得到画布上的画笔对象获取画笔

canvas标签在浏览器中默认300*150的inline-block

Canvas注意事项：

画布宽度和高度只能使用HTML/JS属性来赋值，不能使用CSS样式赋值

每个画布上有且只有一个"画笔"对象--称为"绘图上下文"对象，--使用该对象进行绘图

使用Canvas绘图矩形

矩形定位点默认在：左上角

x，y是矩形的定位点 w，h是矩形的宽高

ctx.lineWidth = 1; 描边宽度(线宽)

ctx.fillStyle = "#ff0"; 填充矩形样式

ctx.strokeStyle = "#000" 描边矩形样式

ctx.fillRect(x,y,w,h); 填充矩形

ctx.strokeRect(x,y,w,h); 描边矩形

ctx.clearRect(x,y,w,h); 清除一个矩形范围所有绘图

使用Canvas绘制文本

ctx.textBaseline = "alphabetic"; 文本基线 top/middle/bottom/alphabetic

ctx.font = "12px sans-serif"; 文本大小和字体

ctx.fillText(str,x,y); 填充一段文本实心字体

ctx.strokeText(str,x,y); 描边一段文本空心字体

ctx.measureText(txt); 基于当前文字大小字体测量文本，返回一对象 {width:x}

ctx.measureText(str).width; 当前文字的宽度

例子：文字左右移动

<canvas id="c2" width="500" height="400"></canvas>
<script>
  //1:获取画笔
  var ctx = c2.getContext("2d");
  //2:设置基线
  ctx.textBaseline='top';
  //3:设置文字大小与字体
  ctx.font="30px SimHei";
  //4:创建文本
  var str = "Hello World";
  var x = 0;
  var y = 0;
  var xDirection = 1;//方向 1  -1
  var txtWidth = ctx.measureText(str).width;
  setInterval(function(){
    //5:清除己有内容
    ctx.clearRect(0,0,500,400);
    //6:再画出文本
    ctx.strokeText(str,x,y);//左上角
    //7:判断
    x += 10 * xDirection;
    if(x>=500-txtWidth){
      xDirection = -1;
    }else if(x<=0){
      xDirection = 1;
    }
  },50);
</script>

Canvas绘图中使用渐变

线性渐变 linearGradient

径向渐变 redialGradient

var g = ctx.createLinearGradient(x1,y1,x2,y2);

g.addColorStop(offset,color);

....

g.addColorStop(offset,color);

ctx.strokeStyle = g;

ctx.fillStyle = g;

例子：

<canvas id="c2" width="500" height="400"></canvas>
<script>
  //1:获取画笔
  var ctx = c2.getContext("2d");
  //2:创建渐变对象
  //左右
  var g = ctx.createLinearGradient(0,0,500,0);
  //上下
  //var g = ctx.createLinearGradient(0,0,0,400);
  //对角线
//  var g = ctx.createLinearGradient(0,0,500,400);
  //3:添加颜色点
  g.addColorStop(0,"#f00");
  g.addColorStop(0.5,"#ff0");
  g.addColorStop(1,"#0f0");
  //4:将渐变对象设置填充样式
  ctx.fillStyle = g;
  //5:创建矩形
  ctx.fillRect(0,0,500,400);
</script>

Canvas绘图路径

Path:类似PS中的"钢笔工具",由多坐标点组成任意形状，路径不可见，可用于"描边","填充","裁剪"

ctx.beginPath(); 开始一条新路径

ctx.moveTo(x,y); 移动指定点

ctx.lineTo(x,y); 从当前到指定点画直线

ctx.arc(cx,cy,r,start,end); 绘制圆拱路径

ctx.stroke(); 对当前路径描边

ctx.fill(); 对当前路径填充

ctx.clip() 以当前路径裁剪

ctx.closePath() 闭合当前路径

画圆：

ctx.arc(圆点x，圆点y，半径，起始角度，结束角度);

半圆：ctx.arc(250,200,100,0*Math.PI/180,180*Math.PI/180);

例子1：两个三角形

<canvas id="c2" width="500" height="400"></canvas>
<script>
  //1:获取画笔
  var ctx = c2.getContext("2d");
  //2:路径
  ctx.beginPath();
  //3:开始新路径
  ctx.moveTo(100,100);
  //4:移动指定点 100,100
  //5:画直线  lineTo
  ctx.lineTo(200,100);
  ctx.lineTo(200,200);
  //ctx.lineTo(100,100);
  ctx.closePath();
  //6:描边
  //ctx.stroke();
  ctx.fill();
  ctx.beginPath();
  ctx.strokeStyle = "#f00";
  ctx.lineWidth = 3;
  ctx.moveTo(300,300);
  ctx.lineTo(300,400);
  ctx.lineTo(400,400);
  ctx.closePath();
  ctx.stroke();
</script>

例子2：坐标系

<canvas id="c2" width="500" height="400"></canvas>
<script>
  //1:获取画笔
  var ctx = c2.getContext("2d");
  //绘制X轴
  ctx.beginPath();
  ctx.moveTo(50,350);
  ctx.lineTo(450,350);
  ctx.lineTo(450-30,350-30);
  ctx.lineTo(450,350);
  ctx.lineTo(450-30,350+30);
  ctx.lineWidth = 3;
  ctx.strokeStyle = "#f00";
  ctx.stroke();
  //绘制Y轴
  ctx.beginPath();
  ctx.moveTo(50,350);
  ctx.lineTo(50,50);
  ctx.lineTo(50-30,50+30);
  ctx.lineTo(50,50);
  ctx.lineTo(50+30,50+30);
  ctx.strokeStyle = "#00f";
  ctx.stroke();
</script>

例子3：进度条


<canvas id="c2" width="500" height="400"></canvas>
<script>
  //1:获取画笔
  var ctx = c2.getContext("2d");
  //2:绘制灰色底框
  ctx.beginPath();
  ctx.arc(250,200,100,0*Math.PI/180,360*Math.PI/180);
  ctx.lineWidth = 15;
  ctx.strokeStyle = "#aaa";
  ctx.stroke();
  //3:绘制绿色的进度条
  //3.1 开始角度
  var start = -90;
  //3.2 结束角色
  var end = -90;
  //3.4 创建路径
  var t = setInterval(function(){
    //无需清除画布
    ctx.beginPath();
    ctx.arc(250,200,100,start*Math.PI/180,end*Math.PI/180);
    end += 5;
    ctx.strokeStyle = "#0a0";
    ctx.stroke();
    if(end >= 275){
      clearInterval(t);
    }
  },100);
</script>

例子4：张嘴闭嘴

<canvas id="c2" width="500" height="400"></canvas>
<script>
  //1:获取画笔
  var ctx = c2.getContext("2d");
  //2:创建张开嘴的笑脸
  function openMouth(){
    ctx.beginPath();
    ctx.arc(250,200,100,45*Math.PI/180,315*Math.PI/180);
    ctx.lineTo(250,200);
    ctx.closePath();//合并线段
    ctx.stroke();
    //填充眼球
    ctx.beginPath();
    ctx.arc(250,150,25,0*Math.PI/180,360*Math.PI/180);
    ctx.fillStyle = "#38f";
    ctx.fill();
    //填充闪亮眼神
    ctx.beginPath();
    ctx.arc(263,135,3,0*Math.PI/180,360*Math.PI/180);
    ctx.fillStyle="#fff";
    ctx.fill();
  }
  //3:创建闭嘴的笑脸
  function closeMouth(){
    ctx.beginPath();
    //画笑脸
    ctx.arc(250,200,100,0*Math.PI/180,360*Math.PI/180);
    ctx.lineTo(250,200);
    ctx.stroke();
    //填充眼球 16:02--16:04
    ctx.beginPath();
    ctx.arc(250,150,25,0*Math.PI/180,360*Math.PI/180);
    ctx.fillStyle = "#38f";
    ctx.fill();
    //填充闪亮眼神
    ctx.beginPath();
    ctx.arc(263,135,3,0*Math.PI/180,360*Math.PI/180);
    ctx.fillStyle="#fff";
    ctx.fill();
  }
  //一秒钟切换一次笑脸  16:05-16:10
  var index = 1;
  var t = setInterval(function(){
    //清除笑脸..
    ctx.clearRect(0,0,500,400);
    index++;
    if(index%2==0){
      openMouth();
    }else{
      closeMouth();
    }
  },1000);

</script>

Canvas绘图图像

canvas属于客户技术.图片在服务器中，所以浏览器必须先下载要绘制图片，且等待图片异步加载完成后再绘图.

var p3 = new Image();

p3.src = "img/p3.png"; //浏览器自动加载图片下载 p3.width为0

p3.onload = function(){ //图片加载完成 p3.width为图片宽度

ctx.drawImage(p3,x,y); //原始图片大小 x，y是坐标

ctx.drawImage(p3,x,y,w,h);//拉伸绘图 w，h拉伸图片

}

例子1：左右移动的图片

<canvas id="c2" width="500" height="400"></canvas>
<script>
  //1:获取画笔
  var ctx = c2.getContext("2d");
  var p3 = new Image();
  p3.src = "img/p3.png";
  var x = 0;
  var y = 0;
  var xDirection = 1;
  p3.onload =  function(){
    var t  = setInterval(function(){
      ctx.clearRect(0,0,500,400);
      ctx.drawImage(p3,x,y);
      x += 5*xDirection;
      if(x>=500-p3.width){
        xDirection = -1;
      }else if(x<=0){
        xDirection = 1;
      }
    },30);
  };
</script>

例子2：图片随鼠标移动

<canvas id="c2" width="500" height="400"></canvas>
<script>
  //1:获取画笔
  var ctx = c2.getContext("2d");
  var p3 = new Image();
  p3.src = "img/p3.png";
  p3.onload = function(){
      var x = 0;//要绘制的飞机位置
      var y = 0;//要绘制的飞机位置
      //!!监听鼠标在画布上方移动事件e
      //x = e.offsetX
      //y = e.offseteY
      //canvas绘图只够给画布绑定事件
      c2.onmousemove = function(e){
        x = e.offsetX;
        y = e.offsetY;
      };
      //!!创建定时器，不停清画布，重绘飞机
      setInterval(function(){
        ctx.clearRect(0,0,500,400);
        ctx.drawImage(p3,x,y);
      },50);
  };
</script>

Canvas绘图变形操作

Canvas绘图中也有变形的技术，可以针对某一个图像、图形的绘制过程进行变开

ctx.rotate(弧度); 旋转绘图片对象,轴点是画布的原点 (0,0)

ctx.translate(x,y); 将整个画布的原点平移到指定点 (100,150)

ctx.save(); 保存画笔当前所有变形状态 (游戏中存盘)

ctx.restore(); 恢复画笔变形到最近一次保存 (游戏读取读数据从磁盘中);

例子1：图片的旋转

   <canvas id="c1" width="500" height="400">您的浏览器不支持canvas标签</canvas>
   <script>
     //1:获取画笔
     var ctx = c1.getContext("2d");
     //2:创建图片对象
     var p3 = new Image();
     //3:修改图片对象src属性
     p3.src = "img/p3.png";
     //4:为图片对象绑定事件 onload
     p3.onload = function(){
       //6:重新设置原点(0,0)==>(200,200)
       ctx.translate(200,200);
       //5:在事件处理函数中绘制图像
       ctx.drawImage(p3,0,0);
       //7:设置旋转角度  90 180 270 360
       var deg = 90*Math.PI/180;
       ctx.rotate(deg);//旋转角度累加效果
       ctx.drawImage(p3,0,0);
       ctx.rotate(deg);//旋转角度累加效果
       ctx.drawImage(p3,0,0);
       ctx.rotate(deg);//旋转角度累加效果
       ctx.drawImage(p3,0,0);
     }
   </script>

例子2：图片旋转（动态）

   <canvas id="c1" width="500" height="400">您的浏览器不支持canvas标签</canvas>
   <script>
     //1:获取画笔
     var ctx = c1.getContext("2d");
     //2:创建图片对象
     var p3 = new Image();
     //3:修改src属性
     p3.src = "img/p3.png";
     //4:绑定事件onload
     p3.onload = function(){
       //5:设置每次旋转角度 5
       var deg = 5*Math.PI/180;
       //6:修改画布原点
       ctx.translate(200,200);
       //7:创建定时器
       setInterval(function(){
         //8:清除画布
         ctx.clearRect(-100,-50,500,400);
         //9:指定旋转角度
         ctx.rotate(deg);
         //10:画图像
         ctx.drawImage(p3,-100,-50);
       },50);
     }
   </script>

什么是Canvas及注意事项

使用Canvas绘图矩形

使用Canvas绘制文本

Canvas绘图中使用渐变

Canvas绘图 路径

Canvas绘图 图像

Canvas绘图 变形操作

猜你喜欢

Canvas绘图路径

Canvas绘图图像

Canvas绘图变形操作