canvas基础知识点(一)

时间:2019-12-14
本文章向大家介绍canvas基础知识点(一),主要包括canvas基础知识点(一)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
  1. 给canvas设置宽高:
    canvas标签的宽高默认是300*150,是一个行内块元素
    可以在canvas标签上通过width,height来设置
    可以在js中给dom对象设置:

      mycanvas.width = 500
      mycanvas.height = 500
    
    

    注意:不要通过css来调整canvas的宽高,导致内部的canvas画布被拉伸,图形变形

    1. 获取画笔工具:
      canvas绘图都是通过canvas标签的画笔来进行的

      var ctx = canvas.getContext('2d')

      注意,不要写成getContent,里面传入的参数目前也只有2d这一种情况

3、 描边和填充

canvas绘制图形都是绘制的路径,看不见摸不着的一种东西,需要进行描边或填充之后才能看到真正的图形
如果绘制图形的路径在绘制完成后没有闭合,继续绘制路径的时候会首尾相连
在填充的时候如果路径依然没有闭合,会将路径的闭合区域填充

ctx.fill()//填充
ctx.stroke()//描边

可以调整ctx.strokeStyle,ctx.fillStyle属性来更改填充,描边的颜色,值为颜色值(rgb,rgba,word,16进制)
    1. 绘制矩形
      ctx.rect(x,y,w,h)
      canvas的坐标系起点是左上角,x轴向右正方向,y轴向下正方向
      x,y代表的是矩形起点(左上角)的位置,w,h就是宽高
      可以使用strokeRect,fillRect方法直接绘制一个填充、描边的矩形
    1. 清楚矩形区域以及动画原理
      ctx.clearRect(x,y,w,h)可以清除某一个矩形区域的图形
      canvas实现动画的原理就是不断的绘制和擦除来实现

         var ctx = canvas.getContext("2d")
         let x=0,y=0;
         ctx.fillRect(x,y,50,50)    
         setInterval(function () {
             //绘制新的图形前擦掉之前的
             ctx.clearRect(0,0,canvas.width,canvas.height)
             x++;y++;
             //不断绘制新图形
             ctx.fillRect(x,y,50,50)
         },30)
      

    原文地址:https://www.cnblogs.com/homehtml/p/12039701.html