• 欢迎来到本站,本站主要做程序员相关技术、博客、笔记,如果喜欢本网站那么赶紧使用Ctrl+D 收藏吧!
  • 如果有任何疑问,可以在下方文章下方留下你的评论~

Example of using HTML canvas fillStyle property

生活日常 8个月前 (10-12) 2次浏览 0个评论

Browser support

Internet Explorer 9, Firefox, opera, chrome, and safari support the fillStyle property.

Note: the <canvas> element is not supported in Internet Explorer 8 and earlier.

Definition and Usage

The fillStyle property sets or returns the color, gradient, or mode used to fill the canvas.

JavaScript syntax:context.fillStyle=color|gradient|pattern;

Example 1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>chinapenpal.com</title>
</head>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support HTML5 canvas tags.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);
</script>

</body>
</html>

Example of using HTML canvas fillStyle property

Example 2

Defines a gradient from top to bottom as a fill pattern for the rectangle:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>chinapenpal.com</title>
</head>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support HTML5 canvas tags.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
</script>

</body>
</html>

Example of using HTML canvas fillStyle property

Example 3

Defines a gradient from left to right as the fill pattern for the rectangle:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>chinapenpal.com</title>
</head>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support HTML5 canvas tags.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
</script>

</body>
</html>

Example of using HTML canvas fillStyle property

Example 4

Defines a gradient from black to red to white as a fill pattern for the rectangle:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello</title>
</head>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support HTML5 canvas tags.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(0.5,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
</script>

</body>
</html>

Example of using HTML canvas fillStyle property

Example 5 & createPattern

Fill the drawing with an image:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using pattern</title>
</head>
<body>

<p>Picture example:</p>
<img src="img_lamp.jpg" id="lamp">
<p>canvas:</p>
<button onclick="draw('repeat')">repeat</button> 
<button onclick="draw('repeat-x')">repeat-x</button> 
<button onclick="draw('repeat-y')">repeat-y</button> 
<button onclick="draw('no-repeat')">no-repeat</button>     
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support HTML5 canvas tags.
</canvas>
<script>
function draw(direction)
{
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.clearRect(0,0,c.width,c.height); 
    var img=document.getElementById("lamp")
    var pat=ctx.createPattern(img,direction);
    ctx.rect(0,0,220,128);
    ctx.fillStyle=pat;
    ctx.fill();
}
</script>

</body>
</html>

repeat:

Example of using HTML canvas fillStyle property

repeat-x:

Example of using HTML canvas fillStyle property

repeat-y:

Example of using HTML canvas fillStyle property

no-repeat:

Example of using HTML canvas fillStyle property


中国笔友, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Example of using HTML canvas fillStyle property
喜欢 (0)
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址