您的位置: 首页  >  文章  >  html5 canvas 绘制矩形， 方法，线性渐变，径向渐变，透明等

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

分类: 文章 • 2025-03-18 22:50:15
               

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

1.    HTML5 canvas属性

1.1.     canvas画图

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

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

1.1.1.      绘制矩形

html

<body>

     <canvas id="mycanvas" width="200" height="200"></canvas>

<script>

     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>

 

 

画布效果：

 

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

 

 

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>

              <meta charset="UTF-8">

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

       </head>

       <body "draw();">

              <canvas id="graduent" width="800" height="800" style="border: 1px solid red;"></canvas>

       </body>

</html>

js

<script>

       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>

 

 

效果：

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

2.1.1.2.      纵向渐变

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

 

 效果：

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

 

 

 

 

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>

              <meta charset="UTF-8">

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

       </head>

       <body "draw();">

       <canvas id="radiu" width="800" height="800" style="border: 1px solid red; " >

    < /canvas>  

       </body>

</html>

js

<script>

              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>

 

效果

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


           

相关推荐