canvas定义:
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,我们可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
运用:
<body>
<canvas id="canvas1" width="600" height="600">
正常的画布是不显示的这个内容的,如果你看到这个,说明你的浏览器不支持canvas
</canvas>
<script type="text/javascript">
var canvas1 = document.querySelector("#canvas1")
console.log([canvas1])
//上下文对象,画笔
var ctx = canvas1.getContext("2d")
// var ctx = canvas1.getContext("webgl")//3d
//绘制路径,画一个矩形
ctx.rect(50,50,300,300)
//填充,
ctx.fillStyle = "aqua"
ctx.fill()
//描边
ctx.lineWidth = 20
ctx.strokeStyle = "salmon"
ctx.stroke()
</script>
</body>
结果: