cvans绘画探索：矩形填充

这一期我们要学的是fillRect()方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属性指定。

<canvas width="300" height="300" id="canvas"/>
<script>
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')



//绘制红色矩形
ctx.fillStyle = "#ff0000";
ctx.fillRect(10, 10, 50, 50);

//绘制半透明的蓝色矩形
ctx.fillStyle = "rgba(0,0,255,0.5)";
ctx.fillRect(30, 30, 50, 50);

</script>