canvas画布

canvas标签

 <!-- canvas是一个画布标签默认情况下他在网页上是一块空白区域，大小300*150-->
    <canvas id="canvas" width="300px" height="150px"></canvas>

1.获取一个画布(要创建一个画布对象)

要在画布中绘制图形，首先要通过JavaScript的getElementById()函数
获取到网页中的画布对象

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

 2.创建一个画布上下文对象

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

3告诉程序绘画路径开始.(可自动生成，可不写)

context.beginPath();

4.绘画图形的起始点(坐标)

context.moveTo(0, 0);

5.绘制图形的连接点

 context.lineTo(0, 100);

6.设置图形的样式

context.strokeStyle = "aqua";

7.描边

context.stroke();

---

在画布上画出一个矩形

<canvas id="canvas"