前言：
如今大家对“canvas背景颜色设置”大约比较关怀，小伙伴们都想要分析一些“canvas背景颜色设置”的相关知识。那么小编同时在网摘上网罗了一些有关“canvas背景颜色设置””的相关内容，希望同学们能喜欢，各位老铁们一起来学习一下吧！通过canvas绘制图形必须先指定图形的线条粗细与颜色,如果不指定,则默认以黑色进行绘制,现在看看如何指定图形样式
1 颜色
(1)以颜色名称表示
fillStyle = "red";
(2)以颜色代码(HEX码)表示
fillStyle = "#FF0000";
(3)以RGBA表示
rgba(red,green,blue,alpha)
red、green、blue可以使0-255的整数值,与一般8位颜色的十进制值相同,alpha可以是0.0-1.0的数值,0代表完全透明,1代表完全不透明,例如0.3表示
透明度30%。
表示蓝色透明度50%：rgba(0,0,255,0.5)
2 ColorPicker网页
网址为：
3 ColorPic软件工具
ColorPic是免费软件,网址为:
ColorPic软件不仅可以挑选色板上的颜色,还可以获取计算机屏幕上任意位置的颜色。
4 线条粗细
lineWidth属性用来指定线条宽度,单位是像素(pixel)。
context.lineWidth = "10";
lineCap属性用来指定线条的端点样式,属性值有butt、round和square。默认值是butt。
context.lineCap = "butt";
实例：
<!DOCTYPE html><html><head><meta charset=" "><title>ch10_08</title><script type="text/javascript">function drawline(){var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');ctx.strokeStyle="#3300cc"; //设定边框颜色//用循环画出10条直线for (i = 0; i < 10; i++){ctx.lineWidth = 1+i; //设定线条宽度ctx.beginPath();ctx.moveTo(20+i*15,20);ctx.lineTo(20+i*15,170);ctx.stroke();}ctx.lineWidth="20" //设定线条宽度ctx.strokeStyle="#ff0066"; //设定边框颜色ctx.beginPath();ctx.moveTo(200, 50);ctx.lineCap="butt";ctx.lineTo(350, 50);ctx.stroke();ctx.beginPath();ctx.moveTo(200, 100);ctx.lineCap="round";ctx.lineTo(350, 100);ctx.stroke();ctx.beginPath();ctx.moveTo(200, 150);ctx.lineCap="square";ctx.lineTo(350, 150);ctx.stroke();}</script><!--style标记内是CSS语法--><style type="text/css">canvas { border: 1px solid black; } //将框线设为1px</style></head><body><input type="button" value=" 画 线 " onclick="drawline();"><p><canvas id="myCanvas" width="400" height="200"></canvas></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #canvas背景颜色设置
