How to specify color and transparency when drawing HTML5 Canvas-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

How to specify color and transparency when drawing HTML5 Canvas

不言

Jun 05, 2018 pm 02:02 PM

canvas html5 transparency color

This article mainly introduces the method of specifying color and transparency when drawing HTML5 Canvas, including the introduction of the global transparent globalAlpha attribute. Friends in need can refer to the following

Specifying color

Black is the default color for Canvas drawing. If you want to change to a different color, you must specify the color before actually drawing.

JavaScript CodeCopy content to clipboard

ctx.strokeStyle = color

Copy after login

Specify the color of the drawn line:

JavaScript CodeCopy content to clipboard

ctx.fillStyle = color

Copy after login

Specify fill color:

Let’s see a practical example:

JavaScript

JavaScript CodeCopy content to the clipboard

onload = function() {   
  draw();   
};   
function draw() {   
  var canvas = document.getElementById(&#39;c1&#39;);   
  if ( ! canvas || ! canvas.getContext ) { return false; }   
  var ctx = canvas.getContext(&#39;2d&#39;);   
  ctx.beginPath();   
  ctx.fillStyle = &#39;rgb(192, 80, 77)&#39;; // 红 
  ctx.arc(70, 45, 35, 0, Math.PI*2, false);   
  ctx.fill();   
  ctx.beginPath();   
  ctx.fillStyle = &#39;rgb(155, 187, 89)&#39;; // 绿 
  ctx.arc(45, 95, 35, 0, Math.PI*2, false);   
  ctx.fill();   
  ctx.beginPath();   
  ctx.fillStyle = &#39;rgb(128, 100, 162)&#39;; // 紫 
  ctx.arc(95, 95, 35, 0, Math.PI*2, false);   
  ctx.fill();   
}

Copy after login

The effect is as follows:
2016325112217008.png (142×142)

Specify Transparency

is the same as in ordinary CSS. When we specify the color, we can also bring an alpha value (but it is not used much, and it was not supported before IE9). Look at the code:

JavaScript

JavaScript CodeCopy the content to the clipboard

onload = function() {   
  draw();   
};   
function draw() {   
  var canvas = document.getElementById(&#39;c1&#39;);   
  if ( ! canvas || ! canvas.getContext ) { return false; }   
  var ctx = canvas.getContext(&#39;2d&#39;);   
  ctx.beginPath();   
  ctx.fillStyle = &#39;rgba(192, 80, 77, 0.7)&#39;; // 
  ctx.arc(70, 45, 35, 0, Math.PI*2, false);   
  ctx.fill();   
  ctx.beginPath();   
  ctx.fillStyle = &#39;rgba(155, 187, 89, 0.7)&#39;; // 
  ctx.arc(45, 95, 35, 0, Math.PI*2, false);   
  ctx.fill();   
  ctx.beginPath();   
  ctx.fillStyle = &#39;rgba(128, 100, 162, 0.7)&#39;; // 
  ctx.arc(95, 95, 35, 0, Math.PI*2, false);   
  ctx.fill();   
}

Copy after login

The result is as follows:
2016325112248089.png (142×142)

There is basically no change from the above code, except that rgb(r, g, b) is changed to rgba(r, g, b, a). The value of a is also 0~1. 0 means completely transparent, 1 means completely opaque (so the alpha value is actually "opacity").

Global transparency globalAlpha
This is also a very simple attribute. The default value is 1.0, which means completely opaque. The value range is 0.0 (completely transparent) ~1.0. This property is the same as the shadow setting. If you don't want to set the opacity globally, you have to reset globalAlpha before drawing next time.

To summarize: What are the state-based attributes?

——globalAlpha

——globalCompositeOpeartion

——strokeStyle

——textAlign,textBaseline

——lineCap,lineJoin, lineWidth,miterLimit

——fillStyle

——font

——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY
We use a code to experience the magic of globalAlpha Where~

JavaScript CodeCopy content to clipboard

<!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>全局透明</title>   
    <style>   
        body { background: url("./images/bg3.jpg") repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; } 
    </style>   
</head>   
<body>   
<p id="canvas-warp">   
    <canvas id="canvas">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</p>   
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
        context.fillStyle = "#FFF";   
        context.fillRect(0,0,800,600);   
        context.globalAlpha = 0.5;   
        for(var i=0; i<=50; i++){   
            var R = Math.floor(Math.random() * 255);   
            var G = Math.floor(Math.random() * 255);   
            var B = Math.floor(Math.random() * 255);   
            context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";   
            context.beginPath();   
            context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);   
            context.fill();   
        }   
    };   
</script>   
</body>   
</html>

Copy after login

Run result:
2016325112320763.jpg (850×500)

Isn't it very cool? I finally feel like an artist.

Related recommendations:

Use HTML5 Canvas to fill images with color and texture

The above is the detailed content of How to specify color and transparency when drawing HTML5 Canvas. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn