简单的图形—矩形
概念
| 类型 | 解释 |
|---|---|
| fill | 填充类型 |
| fillStyle | 填充类型的样式（支持rgb格式/支持普通样式格式如red） |
| fillRect | 填充矩形 |
| stroke | 描边类型 |
| strokeStyle | 描边类型的样式（支持rgb格式/支持普通样式格式如red） |
| strokeRect | 描边矩形 |
| clear | 清除样式 |
/*为了能直观的看到画布上的内容，我们做一下样式的调整*/
body {
text-align: center;
padding: 0;
}
canvas {
box-shadow: 0 0 10px #333;
margin: 0 auto;
margin-top: 20px;
}
以后的关于canvas html代码就不写了，都是下面的一句话
<canvas id="myCanvas" width="800" height="600"></canvas>
填充矩形
function draw() {
let canvas = document.getElementById('myCanvas')
if (canvas.getContext) { // 查看浏览器兼容
let ctx = canvas.getContext('2d') // ctx 类似于画笔
ctx.fillStyle='rgba(150,50, 250, .6)'
ctx.fillRect(50, 50, 400, 300) // fillRect(x, y, width, height)
}
}
结果图
描边矩形
function draw() {
let canvas = document.getElementById('myCanvas')
if (canvas.getContext) {
let ctx = canvas.getContext('2d')
ctx.strokeStyle = 'red'
ctx.strokeRect(50, 50, 300, 150)
}
}
结果图
