前言：
而今大家对“如何填充矩形颜色”大体比较关切，看官们都需要了解一些“如何填充矩形颜色”的相关文章。那么小编在网上网罗了一些有关“如何填充矩形颜色””的相关内容，希望大家能喜欢，大家快快来了解一下吧！1 canvas坐标
在canvas绘图中，随时都会涉及到坐标，所以首先我们就要搞懂canvas的坐标系。
如下图，可以这样理解，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。以左上角为起点(0,0)，向右为x坐标，向下为y坐标。所有元素的位置都相对于原点来定位。所以图中矩形左上角的坐标为对应x轴的长度x像素，y轴的长度y像素，坐标就为（x,y）。
2 绘前准备
2.1 获取画布对象
<canvas>只是HTML的元素，我们要在JavaScript中操作画布，我们就要获取画布对象
//获取画布对象var canvas=document.getElementById('canvas');2.2 获取绘画上下文对象context
有了画布对象之后，我们要使用 getContext() 获取 canvas 的上下文环境，参数传2d。
//获取绘画上下文对象var context=canvas.getContext('2d');2.3 2种创建图形方式
context.fill()：填充，默认黑色，颜色用fillStyle来设置
context.stroke()：绘制路径，默认黑色。颜色用strokeStyle来设置。
3 绘制矩形
canvas提供矩形绘制的原生API，主要有三个
（1）绘制一个填充的矩形
fillRect(x, y, width, height)
（2）绘制一个矩形的边框
strokeRect(x, y, width, height)
（3）清除指定的矩形区域，然后这块区域会变的完全透明。
clearRect(x, y, widh, height)
参数说明：
x：矩形左上角的 x 坐标
y：矩形左上角的 y 坐标
width：矩形的宽度，以像素计
height矩形的高度，以像素计
代码参考：
<html> <head></head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script type="text/javascript"> //获取画布对象 var canvas=document.getElementById('canvas'); //获取绘画上下文对象 var context=canvas.getContext('2d'); //绘制一个填充的矩形 context.fillRect(20, 20, 200, 50); //绘制一个矩形的边框 context.strokeRect(20, 90, 200, 50); //清除矩形区域 context.fillRect(20, 160, 200, 60) context.clearRect(30, 170, 180, 40) </script> </body></html>本章主要讲解canvas的绘图基础，矩形绘制只是一个开始，后面会有更多的图形绘制。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #如何填充矩形颜色
