Canvas标签可以用来画图形，但是效果要用JavaScript脚本来实现，因为canvas标签只是图形的容器，效果要用JavaScript脚本来实现。我们可以用画布画直线、圆、矩形、字符等等。

例1:用画布画一个红色的矩形，具体步骤如下：

步：用document.getElementById()找到画布元素

步骤2:用getContext('2d ')创建一个上下文对象

第三步：fillStyle属性可以设置矩形颜色，本例中设置为红色；fillRect(x，y，width，height)方法可以绘制填充矩形，其中x表示矩形左上角的x轴坐标，y表示矩形左上角的y轴坐标，width表示矩形的宽度，height表示矩形的高度

完整的代码如下：

身体

canvasid=' MyCanvas ' width=' 200 ' height=' 100 ' style=' border :1 pxsolid # 000；/canvas

/body

scripttype='text/javascript '

varc=document . GetElementbyID(' MyCanvas ')；

var CTX=c . GetContext(' 2d ')；

ctx.fillStyle=' # FF0000

ctx.fillRect(25，10，150，80)；

/script

例2:用canvas画一个渐变矩形，代码如下：

身体

canvasid=' MyCanvas ' width=' 200 ' height=' 100 ' style=' border :1 pxsolid # 000；/canvas

/body

scripttype='text/javascript '

varc=document . GetElementbyID(' MyCanvas ')；

var CTX=c . GetContext(' 2d ')；

//创建渐变

var grd=CTX . CreateLinearGradient(0，0，200，0)；

grd.addColorStop(0，' orange ')；

grd.addColorStop(1，'红色')；

//Fillwithgradient

ctx.fillStyle=grd

ctx.fillRect(25，10，150，80)；

/script

创建线性渐变(x，y，x1，y1)可以创建线性渐变，使用渐变时必须使用两种或两种以上的颜色

方法指示颜色停止，可以是0到1

用填充样式设置矩形颜色，然后用填充矩形绘制矩形(x，y，宽度，高度)

上面详细介绍了用画布绘制矩形和渐变矩形的方法。比较简单。新手可以自己试试，看能不能画出比较好看的图形。希望这篇文章对你有帮助！

本文转载自中文网站