<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas width="600px" height="400px" style="border: 1px solid #eeeeee"></canvas>
<script>
var ctx = document.querySelector('canvas').getContext('2d');
// - rect(x,y,w,h) 没有独立路径
ctx.beginPath()
ctx.rect(0,300,50,50)
ctx.fill()
// - strokeRect(x,y,w,h) 有独立路径，不影响别的绘制
ctx.beginPath()
ctx.strokeRect(100,300,50,50)
ctx.fill()
// - fillRect(x,y,w,h) 有独立路径，不影响别的绘制
ctx.beginPath()
ctx.fillRect(200,300,50,50)
ctx.fill()
// - clearRect(x,y,w,h) 擦除矩形区域
ctx.beginPath()
ctx.fillRect(300,300,100,100)
ctx.clearRect(325,300,50,50)
ctx.fill()
//线性渐变
ctx.beginPath()
var grd=ctx.createLinearGradient(0,0,200,0)
grd.addColorStop(0,'red')
grd.addColorStop(0.5,'gold')
grd.addColorStop(1,'cyan')
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,200)
//径向渐变
ctx.beginPath()
var grd=ctx.createRadialGradient(400,50,1,450,60,80);
grd.addColorStop(0,"red");
grd.addColorStop(1,"gold");
ctx.fillStyle=grd;
ctx.fillRect(350,25,150,100);
</script>
</body>
</html>
canvas中的方块
猜你喜欢
转载自blog.csdn.net/qq_44388393/article/details/88250971
今日推荐
周排行