遊びながら学ぶHTML5 (4) - 色を変える-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

遊びながら学ぶHTML5 (4) - 色を変える

黄舟

Mar 29, 2017 pm 02:56 PM

在上一节中我们讲了颜色和像素是怎么回事，其实大多数情况下，我们用不到像素级别的操作，我们只需要对颜色进行整体设置就行了。

一、基本颜色

在HTML5边玩边学（二）-基础绘图中，我们提到过有两个上下文属性可以用来设置颜色：

strokeStyle 决定了你当前要绘制的线条的颜色

fillStyle 决定了你当前要填充的区域的颜色

颜色值只要是符合CSS3 颜色值标准的有效字符串都可以。下面的例子都表示同一种颜色。例如：

下面我们给出一个简单的例子，分别绘制了36个实心圆和36个空心圆，在给他们设置颜色的时候就分别用到了 strokeStyle 和 fillStyle 代码如下：

不同的颜色



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas id="canvas1" width="150" height="150" style=" background-color: black">
你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
<input type="button" value="fillStyle" onclick="fillStyle();" />

<input type="button" value="strokeStyle" onclick="strokeStyle();" />



<script type="text/javascript">

    function fillStyle() {

        //获取上下文对象

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

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

        //清空画布

        ctx.clearRect(0,0,150,150);

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

            for (var j=0;j<6;j++){

                //设置填充色，循环参数 i,j 控制颜色的该变量

                ctx.fillStyle = &#39;rgb(&#39; + Math.floor(255-42.5*i) + &#39;,&#39; +Math.floor(255-42.5*j) + &#39;,0)&#39;;

                //准备画

                ctx.beginPath();

                //画圆轮廓，循环参数 i,j 控制圆心的位置

                ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);

                //填充并显示

                ctx.fill();

            }

        }

    }



    function strokeStyle() {

        //获取上下文对象

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

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

        //清空画布

        ctx.clearRect(0,0,150,150);

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

            for (var j=0;j<6;j++){

                //设置线条颜色，循环参数 i,j 控制颜色的该变量

                ctx.strokeStyle = &#39;rgb(&#39; + Math.floor(255-42.5*i) + &#39;,&#39; +Math.floor(255-42.5*j) + &#39;,0)&#39;;

                //准备画

                ctx.beginPath();

                //画圆轮廓，循环参数 i,j 控制圆心的位置

                ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);

                //上屏显示

                ctx.stroke()

            }

        }

    }

</script>

ログイン後にコピー

二、透明度 Transparency

在第三节HTML5边玩边学（三）-像素和颜色中讲过，一个像素的颜色值由四个字节组成，第四个字节一般用不到，但是当你需要设置透明度的时候就需要第四个字节了。

一般情况下我们用RGB格式来设置一个颜色，比如："rgb(0,0,255)" 表示一个纯蓝色

考虑透明度的时候，我们就用RGBA格式来设置一个颜色，比如："rgba(0,0,255,0.5)" 表示一个透明度为0.5的纯蓝色

字母 a 即表示颜色的透明度，好像也叫颜色的 Alpha 值，范围为：0-1，0代表完全透明，1代表完全不透明

下面的例子分别设置了五种不同的透明度来绘制蓝色矩形

颜色的透明度



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas id="canvas2" width="150" height="150" style="background-position: center center;
background-image:url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)">

    你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

</canvas><br/>

颜色透明度：<input type="button" value="0" onclick="alphaTest1(0);" />

<input type="button" value="0.2" onclick="alphaTest1(0.2);" />

<input type="button" value="0.4" onclick="alphaTest1(0.4);" />

<input type="button" value="0.6" onclick="alphaTest1(0.6);" />

<input type="button" value="0.8" onclick="alphaTest1(0.8);" />

<input type="button" value="1" onclick="alphaTest1(1);" />



<script type="text/javascript">

    function alphaTest1(alpah) {

        //获取上下文对象

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

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

        //清空画布

        ctx.clearRect(0,0,150,150);

        //设置有透明度的蓝色

        ctx.fillStyle="rgba(0,0,255,"+alpah+")"

        ctx.fillRect(20, 20, 110, 110)

    }

</script>

ログイン後にコピー

上下文对象还有一个控制透明度的属性： globalAlpha ，这个属性用来控制全局透明度。

当你设置好这个属性以后，后面绘制的一系列图形都采用同样的透明度，你只需要设置颜色即可，见下面的例子：

全局透明度



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas  id="canvas3" width="150" height="150" style="background-position: center center;
background-image:url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)">

    你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

</canvas><br/>

全局透明度：<input type="button" value="0" onclick="alphaTest2(0);" />

<input type="button" value="0.2" onclick="alphaTest2(0.2);" />

<input type="button" value="0.4" onclick="alphaTest2(0.4);" />

<input type="button" value="0.6" onclick="alphaTest2(0.6);" />

<input type="button" value="0.8" onclick="alphaTest2(0.8);" />

<input type="button" value="1" onclick="alphaTest2(1);" />



<script type="text/javascript">

    function alphaTest2(alpah){

        //获取上下文对象

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

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

        //清空画布

        ctx.clearRect(0,0,150,150);

        //设置全局透明度

        ctx.globalAlpha=alpah

        //绘制各种颜色的形状

        ctx.fillStyle="red"

        ctx.fillRect(10, 10, 30, 30)

        ctx.fillStyle="green"

        ctx.fillRect(10, 50, 30, 30)

        ctx.fillStyle="blue"

        ctx.fillRect(10, 90, 30, 30)

        ctx.fillStyle="yellow"

        ctx.beginPath()

        ctx.arc(100, 75, 40, 0, 360)

        ctx.fill()

    }

</script>

ログイン後にコピー

三、渐变色 Gradients

上下文对象有两个方法可以创建一个叫做 canvasGradient 的对象，并用它设置 fillStyle 或 strokeStyle 属性，绘制出来的图形就有渐变效果了

createLinearGradient(x1,y1,x2,y2)

创建线性渐变：接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

createRadialGradient(x1,y1,r1,x2,y2,r2)

创建径向渐变，接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

创建出 canvasGradient 对象后，我们可以用 addColorStop 方法设置过渡的中间色标，如下：

addColorStop(position, color)

position 参数必须是一个 0.0 与 1.0 之间的数值，表示过渡颜色所在位置。

下面的例子给出了四个线性渐变和两个径向渐变，大家可以看看代码有什么不同：

渐变色



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas  id="canvas4" width="150" height="150" style=" background-color: black">

    你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

</canvas><br/>

渐变：<input type="button" value="横向渐变" onclick="gradients1();" />

<input type="button" value="纵向渐变" onclick="gradients2();" />

<input type="button" value="斜向渐变" onclick="gradients3();" />

<input type="button" value="突变" onclick="gradients4();" />

<input type="button" value="径向渐变" onclick="gradients5();" />

<input type="button" value="偏心径向渐变" onclick="gradients6();" />



<script type="text/javascript">

    function gradients1() {

        var ctx = document.getElementById(&#39;canvas4&#39;).getContext(&#39;2d&#39;);

        //清空画布

        ctx.clearRect(0,0,150,150);

        //创建横向渐变对象

        var lingrad = ctx.createLinearGradient(0,0,150,0);

        //添加色标

        lingrad.addColorStop(0, &#39;blue&#39;);

        lingrad.addColorStop(0.5, &#39;green&#39;);

        lingrad.addColorStop(1, &#39;white&#39;);

        ctx.fillStyle = lingrad;

        ctx.fillRect(10,10,130,130);

    }

    function gradients2() {

        var ctx = document.getElementById(&#39;canvas4&#39;).getContext(&#39;2d&#39;);

        //清空画布

        ctx.clearRect(0,0,150,150);

        //创建纵向渐变对象

        var lingrad = ctx.createLinearGradient(0,0,0,150);

        //添加色标

        lingrad.addColorStop(0, &#39;blue&#39;);

        lingrad.addColorStop(0.4, &#39;green&#39;);

        lingrad.addColorStop(1, &#39;white&#39;);

        ctx.fillStyle = lingrad;

        ctx.fillRect(10,10,130,130);

    }

    function gradients3() {

        var ctx = document.getElementById(&#39;canvas4&#39;).getContext(&#39;2d&#39;);

        //清空画布

        ctx.clearRect(0,0,150,150);

        //创建纵向渐变对象

        var lingrad = ctx.createLinearGradient(0,0,150,150);

        lingrad.addColorStop(0, &#39;blue&#39;);

        lingrad.addColorStop(0.5, &#39;green&#39;);

        lingrad.addColorStop(1, &#39;white&#39;);

        ctx.fillStyle = lingrad;

        ctx.fillRect(10,10,130,130);

    }

    function gradients4() {

        var ctx = document.getElementById(&#39;canvas4&#39;).getContext(&#39;2d&#39;);

        //清空画布

        ctx.clearRect(0,0,150,150);

        //创建斜向渐变对象

        var lingrad = ctx.createLinearGradient(0,0,0,150);

        lingrad.addColorStop(0, &#39;blue&#39;);

        lingrad.addColorStop(0.5, &#39;white&#39;);

        lingrad.addColorStop(0.5, &#39;green&#39;);

        lingrad.addColorStop(1, &#39;white&#39;);

        ctx.fillStyle = lingrad;

        ctx.fillRect(10,10,130,130);

    }

    function gradients5() {

        var ctx = document.getElementById(&#39;canvas4&#39;).getContext(&#39;2d&#39;);

        //清空画布

        ctx.clearRect(0,0,150,150);

        //创建径向渐变对象

        var lingrad = ctx.createRadialGradient(75,75,10,75,75,70);

        lingrad.addColorStop(0, &#39;white&#39;);

        lingrad.addColorStop(1, &#39;rgba(255,255,255,0)&#39;);

        ctx.fillStyle = lingrad;

        ctx.arc(75, 75, 70, 0, 360);

        ctx.fill();

    }

    function gradients6() {

        var ctx = document.getElementById(&#39;canvas4&#39;).getContext(&#39;2d&#39;);

        //清空画布

        ctx.clearRect(0,0,150,150);

        //创建偏心径向渐变对象

        var lingrad = ctx.createRadialGradient(5,5,10,75,75,70);

        lingrad.addColorStop(0, &#39;white&#39;);

        lingrad.addColorStop(1, &#39;rgba(255,255,255,0)&#39;);

        ctx.fillStyle = lingrad;

        ctx.arc(75, 75, 70, 0, 360);

        ctx.fill();

    }

</script>

ログイン後にコピー

四、阴影

上下文对象有四个属性来设置阴影，分别是

shadowOffsetX = float

shadowOffsetY = float

shadowBlur = float

shadowColor = color

shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，他们默认都是 0。

shadowBlur 用于设定阴影的模糊程度，默认为 0。

shadowColor 用于设定阴影效果的延伸，值可以是标准的 CSS 颜色值，默认是全透明的黑色。

下面的例子是分别显示一个带阴影的矩形，一个带阴影的文本，代码如下：

阴影



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas  id="canvas5" width="150" height="150" style=" background-color: black">

    你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

</canvas><br/>

<input type="button" value="图形阴影" onclick="shadow1();" />

<input type="button" value="文字阴影" onclick="shadow2();" />



<script type="text/javascript">

    function shadow1() {

        var ctx = document.getElementById(&#39;canvas5&#39;).getContext(&#39;2d&#39;);

        //清空画布

        ctx.clearRect(0,0,150,150);

        ctx.shadowOffsetX = 5;

        ctx.shadowOffsetY = 5;

        ctx.shadowBlur    = 4;

        ctx.shadowColor   = &#39;rgba(255, 0, 0, 0.5)&#39;;

        ctx.fillStyle     = &#39;blue&#39;;

        ctx.fillRect(10, 10, 130, 130);

    }



    function shadow2() {

        var ctx = document.getElementById(&#39;canvas5&#39;).getContext(&#39;2d&#39;);

        //清空画布

        ctx.clearRect(0,0,150,150);

        ctx.shadowOffsetX = 4;

        ctx.shadowOffsetY = 3;

        ctx.shadowBlur = 2;  

        ctx.shadowColor = "rgba(255, 255, 255, 0.5)";



        ctx.font = "20px Times New Roman";

        ctx.fillStyle = "red";

        ctx.fillText("Sample String", 15, 70);

    }

</script>

ログイン後にコピー

以上が遊びながら学ぶHTML5 (4) - 色を変えるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。