初识canvas

初识canvas

1.什么是canvas?

使用canvas绘制线

  • 设置canvas的宽高,并获取canvas对象,判断是否支持canvas。

    <canvas id = "demo1" height = "200" width = "200" style = "border:1px solid #eee"</canvas>
    /*canvas有宽高属性,所以设置的时候是不需要单位的*/
  • 画一条直线,红色的,线宽10px

    <script>
        获取对象
      const van = document.getElementById("demo1")
        判断是否支持canvas
        if(van.getContext){
            //获取画布,getContext中的参数'2d',固定的,没有'3d'
            //canvas 的原点默认在左上角
            //两点确定一条直线,划线API:lineTo(x,y):x,y为这个点的横纵坐标
            const van  = canvas.getContext('2d');
            van.beginPath();//开始绘画
            van.lineTo(10,10);
            van.lineTo(100,10);
          van.lineWidth = 10;//线宽
            van.strokeStyle = 'pink';
            van.stroke();//这个AP是绘制,前面的操作都是告诉要绘制成什么样子,只有这句才是开始绘画
            van.closePath();//结束绘画
    
            van.beginPath();//开始绘画
            van.lineTo(10,60);
            van.lineTo(150,10);
            van.lineWidth = 10;
            van.strokeStyle = 'blue';
            van.stroke();
            van.closePath();//结束绘画
        }else{
            alert("不支持canvas")
        }
    
    </script>
  • 如果没有van.beginPath(),和van.closePath(),这样两个线会自动连接到一起

    • 目标:
      初识canvas

    • 开始和结束就会这样:
      初识canvas

上一篇:vue笔记


下一篇:Vant Weapp小程序蹲坑之使用checkbox组件