网站首页 > 知识剖析正文

canvas——设置图形样式

nixiaole 2025-01-05 19:28:36 知识剖析 54 ℃

通过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网页

网址为：http://www.pagetutor.com/colorpicker/index.html

3 ColorPic软件工具

ColorPic是免费软件,网址为: http://iconico.com/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详解(一)——线条的各种画法
下一篇：用html5的canvas和JavaScript创建一个绘图程序

网站首页 > 知识剖析 正文

canvas——设置图形样式

猜你喜欢

网站首页 > 知识剖析正文