html5 Canvas颜色渐变（画图很重要）

如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。
fillStyle = color
strokeStyle = color

strokeStyle 是用于设置图形轮廓的颜色，而 fillStyle 用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。默认情况下，线条和填充颜色都是黑色(CSS 颜色值 #000000)。

下面的例子都表示同一种颜色。
// 这些 fillStyle 的值均为 ‘橙色‘
ctx.fillStyle = "orange";
  ctx.fillStyle = "#FFA500";
  ctx.fillStyle = "rgb(255,165,0)";
  ctx.fillStyle = "rgba(255,165,0,1)";

注意: 目前 Gecko 引擎并没有提供对所有的 CSS 3 颜色值的支持。例如，hsl(100%,25%,0) 或者 rgb(0,100%,0) 都不可用。

注意: 一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。

Canvas填充样式fillStyle
说明

在本示例里，我会再度用两层for循环来绘制方格阵列，每个方格不同的颜色。结果如图，但实现所用的代码却没那么绚丽。我用了两个变量i和j
为每一个方格产生唯一的RGB色彩值，其中仅修改红色和绿色通道的值，而保持蓝色通道的值不变。你可以通过修改这些颜色通道的值来产生各种各样的色板。通
过增加渐变的频率，你还可以绘制出类似 Photoshop 里面的那样的调色板。
代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk" />
<script type="text/javascript">
function draw(){
var ctx = document.getElementById(‘canvas‘).getContext(‘2d‘);
for (var i=0;i<6;i++){
  for (var j=0;j<6;j++){
    ctx.fillStyle = ‘rgb(‘ + Math.floor(255-42.5*i) + ‘,‘ +Math.floor(255-42.5*j) + ‘,0)‘;
    ctx.fillRect(j*25,i*25,25,25);
  }
}
}
</script>
<title>测试fillStyle</title>
</head>
<body >
<canvas id="canvas" width="400" height="300">
</canvas>
</body>
</html>

效果

Canvas strokeStyle 案例
说明
这个示例与上面的有点类似，但这次用到的是 strokeStyle 属性，而且画的不是方格，而是用 arc 方法来画圆。
代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function draw() {

var ctx = document.getElementById(‘canvas‘).getContext(‘2d‘);
    for (var i=0;i<6;i++){
     for (var j=0;j<6;j++){
      ctx.strokeStyle = ‘rgb(0,‘ + Math.floor(255-42.5*i) + ‘,‘ + Math.floor(255-42.5*j) + ‘)‘;
      ctx.beginPath();
      ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
      ctx.stroke();
     }
    }
}
</script>
<title>测试strokeStyle</title>
</head>
<body >
  <canvas id="canvas" width="400" height="300">
</canvas>
</body>
</html>
====================================================

效果

透明度 Transparency
除了可以绘制实色图形，我们还可以用 canvas 来绘制半透明的图形。通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。

globalAlpha = transparency value

globalAlpha属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过，我认为下面的方法可操作性更强一点。
因为strokeStyle和fillStyle 属性接受符合CSS3 规范的颜色值，那我们可以用下面的写法来设置具有透明度的颜色。
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";
rgba() 方法与 rgb() 方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。

Canvas透明度globalAlpha
说明
  在这个例子里，我用四色格作为背景，设置globalAlpha 为
0.2后，在上面画一系列半径递增的半透明圆。最终结果是一个径向渐变效果。圆叠加得越更多，原先所画的圆的透明度会越低。通过增加循环次数，画更多的
圆，背景图的中心部分会完全消失。
代码
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <script type="text/javascript">
   function draw() {
    var ctx = document.getElementById(‘canvas‘).getContext(‘2d‘);
    // draw background
    ctx.fillStyle = ‘#FD0‘;
    ctx.fillRect(0,0,75,75);
    ctx.fillStyle = ‘#6C0‘;
    ctx.fillRect(75,0,75,75);
    ctx.fillStyle = ‘#09F‘;
    ctx.fillRect(0,75,75,75);
    ctx.fillStyle = ‘#F30‘;
    ctx.fillRect(75,75,150,150);
    ctx.fillStyle = ‘#FFF‘;
    ctx.globalAlpha = 0.2;
    // Draw semi transparent circles
    for (var i=0;i<7;i++){
      ctx.beginPath();
      ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
      ctx.fill();
   }
  }
</script>
<title>测试strokeStyle</title>
</head>
<body >
<canvas id="canvas" width="400" height="300">
</canvas>
</body>
</html>
====================================================

效果：

在网页上画一个三角形(HTML5 Canvas作图)

简化作图步骤，重写作图函数(画一个三角形)：

function DrawTriangle(Canvas,A,B,C)

{

//画个三角形,“A、B、C”是顶点

with (Canvas)

{

moveTo(A[0],A[1]);

lineTo(B[0],B[1]);

lineTo(C[0],C[1]);

lineTo(A[0],A[1]);

}

把这个函数写进“bigengineer.js”中。

下面是更多的实例，这些例子都很有代表性，一通百通：

4、画个三角形：

<title>Google搜索：HTML 5 金海龙</title>

</head>

var c=document.getElementById("cc");

var hb=c.getContext("2d");

hb.beginPath();

var A=new Array(10,10);

var B=new Array(50,40);

var C=new Array(80,80);

DrawTriangle(hb,A,B,C);

hb.stroke();

hb.endPath();

</script>

</body>

</html>

自己画的三角形

///////<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>

        <script type="text/javascript" src="bigengineer.js"></script>

    </head>

    <body>    <canvas id="cc" width="800" height="200"></canvas>

    <script type="text/javascript">

        var c=document.getElementById("cc");

        var hb=c.getContext("2d");

        hb.beginPath();

        var A=new Array(10,10);

        var B=new Array(40,10);

        var C=new Array(70,70);

        hb.closePath();        hb.strokeStyle="red";

        hb.fillStyle="red";

        DrawTriangle(hb,A,B,C);

        hb.stroke();        hb.fill();        hb.endPath();

    </script>

    </body>

    </html></html>/////////js

/** * Created by 冰渊 on 2016/1/17. */function DrawTriangle(Canvas,A,B,C)

{

//画个三角形,“A、B、C”是顶点

    with (Canvas)

    {

        moveTo(A[0],A[1]);

        lineTo(B[0],B[1]);

        lineTo(C[0],C[1]);

        lineTo(A[0],A[1]);

    }

}摘自博客

时间： 2024-10-05 06:36:48

html5 Canvas颜色渐变（画图很重要）

在网页上画一个三角形(HTML5 Canvas作图)

html5 Canvas颜色渐变（画图很重要）的相关文章

HTML5 canvas 做画板画图可以做电子白板

html5 canvas 填充渐变形状

HTML5 Canvas ( 线性渐变, 升级版的星空 ) createLinearGradient, addColorStop

HTML5 Canvas 颜色填充学习

html5 canvas 水平渐变描边

html5 canvas 径向渐变2

html5 canvas图片渐变

[转]html5 Canvas画图4：填充和渐变

[转]html5 Canvas画图教程(1)—画图的基本常识