js 画布填充颜色 - Javascript

简介

在Javascript中，我们可以利用HTML5中提供的Canvas API绘制各种图形，包括直线、圆形、矩形等等。同时，我们也可以利用Canvas API中的fillStyle属性指定填充颜色。

使用方法

步骤一：创建画布

我们可以通过如下代码创建一个指定宽高的画布：

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);

也可以使用已经存在的画布：

var canvas = document.getElementById('my-canvas');

步骤二：选择填充颜色

我们可以通过fillStyle属性指定填充颜色，可以使用CSS中的各种颜色格式，例如十六进制颜色值、RGB颜色值、RGBA颜色值等等。

var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000'; //红色

步骤三：绘制图形

绘制图形的方法有很多，这里只介绍两个简单的绘制方法：绘制矩形和绘制圆形。

绘制矩形：

var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000'; //红色
ctx.fillRect(0, 0, 100, 100); //绘制一个宽高为100的红色矩形

绘制圆形：

var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000'; //红色
ctx.beginPath(); //开始绘制
ctx.arc(50, 50, 30, 0, Math.PI * 2, false); //绘制一个半径为30的圆
ctx.closePath(); //结束绘制
ctx.fill(); //填充颜色

完整示例

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000'; //红色

ctx.fillRect(0, 0, 100, 100); //绘制一个宽高为100的红色矩形

ctx.fillStyle = '#00FF00'; //绿色
ctx.beginPath(); //开始绘制
ctx.arc(50, 50, 30, 0, Math.PI * 2, false); //绘制一个半径为30的圆
ctx.closePath(); //结束绘制
ctx.fill(); //填充颜色

总结

在Javascript中，我们可以通过Canvas API指定填充颜色，利用绘图方法绘制出各种形状，实现各种效果。掌握好Canvas API的使用，可以为网页增加更多的互动性和视觉效果。