HTML5怎样为样子图上色调如何绘图具备色调和全透

日期:2020-12-11 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

1、自定画笔款式

假如想为样子图上色调,必须应用下列两个关键的特性。

fillStyle : 设定下来全部fill实际操作的默认设置色调。
strokeStyle : 设定下来全部stroke实际操作的默认设置色调。

2、绘图具备色调和全透明度的矩形框

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset = utf⑻">
<title>HTML5</title>
<script type="text/javascript" charset = "utf⑻">
//这个涵数将在网页页面彻底载入后启用
function pageLoaded()
{
//获得canvas目标的引入,留意tCanvas姓名务必和下面body里边的id同样
var canvas = document.getElementById('tCanvas');
//获得该canvas的2D制图自然环境
var context = canvas.getContext('2d');
//绘图编码将出現在这里
//设定填充色调为鲜红色
context.fillStyle = "red";
//画1个鲜红色的实心矩形框
context.fillRect(50,50,100,40);
//设定边线色调为翠绿色
context.fillStyle = "green";
//画1个翠绿色空心矩形框
context.strokeRect(120,100,100,35);
//应用rgb()设定填充色调为蓝色
context.fillStyle = "rgb(0,0,255)";
//画1个蓝色的实心矩形框
context.fillRect(80,230,100,40);
//设定填充色为黑色且alpha值(全透明度)为0.2
context.fillStyle = "rgba(0,0,0,0.2)";
//画1个全透明的黑色实心矩形框
context.fillRect(300,180,100,50);
}
</script>
</head>
<body onload="pageLoaded();">
<canvas width = "500" height = "300" id = "tCanvas" style = "border:black 1px solid;">
<!--假如访问器不适用则显示信息以下字体样式-->
提醒:你的访问器不适用<canvas>标识
</canvas>
</body>
</html>

3、绘图实际效果