当前位置：网站首页 > 技术文章 > 正文

canvas——设置图形样式

myzbx 2025-01-21 19:59 23 浏览

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

CSS HEX 颜色

上一篇：作为JAVAEE软件工程师，学习一点CSS技术是必不可少的。
下一篇：推荐日本最经典的传统色网站+免费自助建站工具

canvas——设置图形样式

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

20个免费音乐音效下载网站，无版权素材商业影片也可用

comfyui安装MimicMotion扩展，AI跳舞动作模仿

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331