当前位置：网站首页 > 热门文章 > 正文

canvas——设置图形样式

bigegpt 2025-01-16 18:03 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>

canvasfillstyle

上一篇：Canvas 从入门到劝朋友放弃(图解版)
下一篇：使用canvas实现简单的贪吃蛇游戏，html+css+js

canvas——设置图形样式

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解

7 个对 Java 意义重大的性能指标，你知道几个?

Laravel框架使用图片处理简单教程

PHP 远程调试最佳实践