html5 canvas 绘制矩形，方法，线性渐变，径向渐变，透明等

最新推荐文章于 2024-05-17 16:33:04 发布

csdn_chenli

最新推荐文章于 2024-05-17 16:33:04 发布

阅读量1.2w

点赞数 3

分类专栏： html5

本文链接：https://blog.csdn.net/csdn_chenli/article/details/52024262

版权

html5 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

canvas 绘制矩形，方法，线性渐变，径向渐变，透明

1. HTML5 canvas属性

1.1. canvas画图

<canvas>标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。

在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

1.1.1. 绘制矩形

html

<body>

var c=document.getElementById("mycanvas");//首先找canvas元素

varctx=c.getContext ("2d");//创建context对象，getContext ("2d")对象是内建的HTML5对象，拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法。

//下面两行代码绘制一个红色矩形

ctx.fillStyle="#ff0000";// 设置fillStyle属性可以是CSS样式颜色，渐变，或是图案。fillStyle默认设置是#000000（黑色）

ctx.fillRect(0,0,120,50);//fillRect(x,y,width,height)方法定义了矩形当前的填充方式。

</script>

</body>

画布效果：

1.1.2. canvas方法

方法	用途
getContext(contextID)	公开在canvas上绘图需要的API。唯一（当前）可用的contextID是2d。
height	设置canvas的高度，默认值是150像素
width	设置canvas的宽度，默认值是300像素
createLinearGradient(x1,y1,x2,y2)	创建一个线性渐变，起始坐标为x1,y1,结束坐标为x2,y2.
createLinearGradient(x1,y1,r1,x2,y2,r2)	创建放射性渐变，圆圈的起始坐标x1,y1,半径r1,圆圈的结束坐标为x2,y2,半径为r2。

addColorStop(offset,color)	向一个渐变添加一个颜色停止。颜色停止（color stop）是渐变中颜色更改发生的位置。offset必须介于0到1之间。
fillStyle	设置用于填充一个区域的颜色-例如fillStyle="rgb(255,0,0)";
strokeStyle	设置用于绘制一根直线的颜色-例如fillStyle="rgb(255,0,0)";
fillRect(x,y,w,h)	填充一个定位于x和y.宽度和高度分别为w和h的矩形。
strokeRect(x,y,w,h)	绘制一个定位于x和y,宽度和高度分别为w和h的矩形的轮廓
moveTo(x,y)	将绘图位置移动到坐标X，Y。

lineTo(x,y)

从绘图方法介绍的最后位置到X，Y绘制一条直线。

2.1. canvas （线性渐变）

2.1.1. 什么是线性渐变

线性渐变是指从开始地点到结束地点，颜色呈直线的徐徐变化的效果。

使用createLinearGradient命令，这个命令可以获得一个canvasGradient对象，使用这个对象的addColoStop方法添加颜色。

CanvasGradient = ctx.createLinearGradient(x0, y0, x1, y1)

// 渐变的开始地点(x0, y0)，结束地点(x1, y1)指定后，返回线性渐变对象CanvasGradient。

//然后我们通过addColorStop方法，offset为0的地方为开始地点的颜色，offset为1的则为结束地点的颜色。另外，很明显的，x0=x1并且y0=y1的时候，不会有渐变效果出现。

CanvasGradient.addColorStop(offset, color)

这个方法就是增加点的颜色，如果offset大于1或者小于0，会发生INDEX_SIZE_ERR异常；color可以是任何合法的CSS颜色，如果不是，则会发生SYNTAX_ERR异常。

如果offset是指定0到1之间的值，则是对应中间的比例位置。

2.1.1.1. 水平渐变

code

<!DOCTYPE html>

<html>

<head>

<title>canvas绘制背景渐变</title>

</head>

</body>

</html>

function draw(){

var canvas =document.getElementById("graduent");

if ( ! canvas || ! canvas.getContext ) { return false; }

var ctx=canvas.getContext("2d");

ctx.beginPath();

//指定渐变区域

var grad =ctx.createLinearGradient(0,0,800,0);

//createLineGradient(x1,y1,x2,y2)x1=x2 纵向渐变 y1=y2横向渐变

//指定几个颜色

//CanvasGradient.addColorStop(offset, color)offset的值是0到1之内，大于1或是小于0之间会发生异常，0表示开始颜色，1表示结束的颜色。color的值是rgb. grad.addColorStop(0,'rgb(255, 0, 0)'); // 红

grad.addColorStop(0.5,'rgb(240, 0, 255)'); //紫

grad.addColorStop(1,'rgb(0, 24, 255)'); //蓝

//将这个渐变设置为fillStyle

ctx.fillStyle=grad;

ctx.rect(0,0,800,800);//绘制宽800高800的矩形。

ctx.fill();

}

</script>

效果：

2.1.1.2.      纵向渐变

var grad =ctx.createLinearGradient(0,0,0,800);

效果：

1.2. canvas绘制径向渐变

createRadialGradient()方法创建一条放射颜色渐变，这个方法创建并返回一个新的CanvasGradient对象，该对象在两个指定圆周之间放射性地插值颜色。

createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,RadiusEnd)

xStart,yStart开始圆的圆心坐标，radiusStart开始圆的直径，xEnd,yEnd结束圆的圆心坐标，radiusEnd结束圆的直径。

在设定颜色时，与线性渐变相同，使用addColorStop方法进行设定即可。同样也需要设定0—1之间的浮点数来作为渐变转折点的偏移量。

code

<!DOCTYPE html>

<html>

<head>

<title>canvas绘制径向渐变</title>

</head>

< /canvas>

</body>

</html>

function draw(){

var canvas = document.getElementById("radiu");

if(canvas ==null)returnfalse;

var context = canvas.getContext('2d');

var g1 = context.createRadialGradient(0,0,30,800,800,400);

g1.addColorStop(0.1,'rgb(255,255,0)');

g1.addColorStop(0.3,'rgb(255,0,255)');

g1.addColorStop(1,'rgb(0,255,255)');

context.fillStyle = g1;

context.fillRect(0,0,800,800);

context.fill();

var n =0;

var g2 = context.createRadialGradient(250,250,0,250,250,300);

g2.addColorStop(0.1,'rgba(255,0,0,0.5)');

g2.addColorStop(0.7,'rgba(255,255,0,0.5)');

g2.addColorStop(1,'rgba(0,0,255,0.5)');

for(var i =0; i <10; i++){

context.beginPath();

context.fillStyle = g2;

context.arc(i *25, i *25, i *10,0,Math.PI *2,true);

context.closePath();

context.fill();

}

</script>

效果

csdn_chenli

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas 绘制矩形，方法，线性渐变，径向渐变，透明等

canvas 绘制矩形，方法，线性渐变，径向渐变，透明1. HTML5 canvas属性1.1. canvas画图标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。1.1.1. 绘制矩形html
复制链接

扫一扫