canvs画布的使用

canvs画布介绍

canvas 就是画布的意思

1. 获取canvas 元素
2. 搭建canvas绘制环境(我们所有的绘制行为都是在这个环境下进行的)
3. 在内存绘制(仅仅存在于内存中 我们看不到)
4. 绘制到页面上(调用stroke方法)

1.创建一个画布

html

 <canvas id="myCanvas"> </canvas>   

1.获取canvas元素

 var canvas = document.getElementById("myCanvas");

2.搭建canvas画布的绘制环境

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

3.我要画一条先(0, 0) 到 (100, 100) 使用moveTo 和 lineTo 只是在内存里面创建了一条线路

 ctx.moveTo(0,0);
 ctx.lineTo(100, 100);

4.绘制到页面

 ctx.stroke(); 

显示图 :

2. 设置画布的大小

canvas 默认的宽高为300*150

注意点 : css中的宽高 指的是拉伸后的宽高
行内或者js设置的宽高是 真实设置画的宽高

第一种写法 :
在行内样式更改大小

	<canvas id="myCanvas" width="200" height="200"></canvas>

第二中 :
画布的宽高在js里面也可以设置

  canvas.width = 200;
  canvas.height = 200;

3. canvas画直线

	ctx.moveTo(0,0);
    ctx.lineTo(100, 100);
    ctx.lineTo(100, 200)

3.1 画两条直线
绘制两条线 在页面上呈现以后 会有发现一个问题 第一条线的颜色会比第二条线的颜色深

分析原因 :
绘制第一条线的时候 在内存中生成了一个路径 当地一个stroke走完过后 然后绘制第二条 此时 内存中有两条路径
在调用第一次stroke， 就会把这两个路径再绘制依次 所以就出现了 第一条路径绘制两次 颜色较深的情况

解决方法 :

把所有需要绘制的线条的moveTo 和lineTo全都写完 只调用stroke 一次性绘制

		ctx.moveTo(0,0);
        ctx.lineTo(100, 100);
        ctx.lineTo(100, 200)

        // 给线条设置颜色
        ctx.strokeStyle = "#f00";

        // 绘制到页面
        //  ctx.stroke() 

        ctx.moveTo(100,0);
        ctx.lineTo(200, 100);
        ctx.lineTo(200, 200);
         
        ctx.strokeStyle = "#0f0";
         
        // 绘制到页面
        ctx.stroke()

效果图 :

4. canvas画两条不同的直线

beginPath 方法

当程序运行时 遇到beginPath 的时候 那么就会将内存中在beginPath之前的路径全部清空然后从当下的路径开始绘制

 		 ctx.moveTo(0,0);
         ctx.lineTo(100, 100);
         ctx.lineTo(100