用canvas来画矩形

画一个填充满的矩形

  1. 获取canvas画布并设置画布大小
    1
    2
    3
    4
    <canvas id="canvas"></canvas>
    var canvas = document.getElementById('canvas')
    canvas.height = 200
    canvas.width = 200

2.获取上下文环境

1
var ctx = canvas.getContext('2d')

3.开始绘画,画一个填充满的矩形
1
ctx.fillRect(25,25,100,100)

查看效果

画一个只有边框的矩形

1.获取canvas画布并设置画布大小

1
2
3
4
<canvas id="canvas"></canvas>
var canvas = document.getElementById('canvas')
canvas.height = 200
canvas.width = 200

2.获取上下文环境
1
var ctx = canvas.getContext('2d')

3.画一个只有边框的矩形
1
ctx.strokeRect(25,25,100,100)

查看效果

在一个矩形中掏出一个矩形来

1.获取canvas画布并设置画布大小

1
2
3
4
<canvas id="canvas"></canvas>
var canvas = document.getElementById('canvas')
canvas.height = 200
canvas.width = 200

2.获取上下文环境
1
var ctx = canvas.getContext('2d')

3.先画一个填充了的矩形
1
ctx3.fillRect(25,25,100,100)

4.再在矩形内用clearReact清理出一个小矩形来

1
ctx3.clearRect(50,50,50,50)

查看效果