定义:
HTML5 <canvas> 标签用于绘制图像。
<canvas> 元素本身并没有绘制能力,须通过脚本来完成绘图。
例:
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
//1.获取一个画布(要创建一个画布对象)
var canvas=document.getElementById("canvas");
//2.创建一个画布上下文对象
var context=canvas.getContext("2d");
//3.告诉程序绘画路径开始
context.beginPath();
//4.绘制图形的起始点(坐标)
context.moveTo(0,0);
//5.绘制图形的连接点
context.lineTo(100,100);
context.closePath(); //闭合
//6.设置图形的样式
context.strokeStyle="red"
//7.描边
context.stroke();
//8.填充颜色
context.fillStyle="green"; //先选择颜色
context.fill(); //再填充
</script>
</body>
效果图: