canvas画布

最新推荐文章于 2024-10-29 15:56:52 发布

原创最新推荐文章于 2024-10-29 15:56:52 发布 · 404 阅读

0 ·

CC 4.0 BY-SA版权

Jquery 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍Canvas的基本使用方法，包括画布设置、颜色样式、渐变填充、路径绘制、文本处理等核心功能。同时，介绍了ECharts插件的使用，演示如何通过数据自动生成图表。

使用方法

<canvas width = " " height = " " id = "draw" 	 //使用canvas标签布置画布，其width和height也是标签，不能在style内书写
<script>
	var draw = document.getElementById(" draw ");//获取标签
	var bord = draw.getContext(" 2d ");			 //通过标签获取画布，再通过画布调用绘制方法

常用绘制方法

颜色、样式和阴影：

fillStyle 填充绘画的颜色、渐变或模式
bord.fillStyle = " ";
strokeStyle 设置笔触的颜色、渐变或模式
bord.strokeStyle = " ";
shadowColor 设置阴影颜色
bord.shadowColor = " black ";
shacowBlur 设置阴影模糊级别
bord.shadowBlur = 10 ;
shadowOffsetX 设置阴影的水平偏移距离
bord.shadowOffsetX = 20;
shadowOffsetY 设置阴影的垂直偏移距离
bord.shadowOffsetY = 20;

颜色渐变：

createLinearGradient 创建线性颜色渐变
var changecolor1 = bord.createLinearGradient(x0,y0,x1,y1);
x0,y0:渐变开始点的坐标
x1,y1:渐变结束点的坐标
createPattern 在指定方向上重复指定的元素（指定平铺）
var changeimg = bord.createPattern(参数1,"参数2");
参数1：需要重复的元素
参数2：重复方式：
- repeat：全铺
- repeat-X:水平平铺
- repeat-Y:垂直平铺
- no-repeat：不平铺
createRadialGradient 创建放射性渐变
var changecolor2 = bord.createRadialGradient(x0,y0,r0,x1,y1,r1);
x0,y0:渐变开始的圆圆心坐标
r0：渐变开始的圆的半径
x1,y1:渐变结束的圆圆心坐标
r1：渐变结束圆的半径
addColorStop 规定渐变对象中的颜色和停止位置
changeColor1.addColorStop(参数1，参数2);
参数1：渐变的位置（0~1之间的值）
参数2：渐变的颜色

bord.fillStyle = changecolor1;最后使用创建的变量

线条样式：

lineCap：设置线条末端样式
bord.lineCap = "butt添加平直边缘(默认)/round添加圆帽/square添加方帽
lineJoin：设置边角样式
board.lineJoin = "bevel切角/round钝角/miter尖角(默认)";
lineWidth：设置线宽(单位为px）
bord.lineWidth = 10;
miterLimit：设置斜切最大长度(仅在lineJoin为miter时生效，超出规定长度部分切角)
bord.miterLimit = 4;

矩形:

rect：创建矩形
bord.rect(x , y , width , height); bord.stroke( );
s,y为起始位置的坐标(矩形的左上角)
width、height为矩形的宽高
fillRect：创建空矩形（参数与rect相同，需要使用fillStyle来填充）
bord.rect( x , y , width , height );
strokeRect：创建无填充矩形(参数与rect相同，需要使用strokeStyle来设置填充色)
bord.strokeRect( x , y , width , height);
clearRect：清空指定矩形范围内的像素
bord.clearRect( x , y , width , height );

字体：

font：设置文本
bord.font = "字体大小字体内容";
例:bord.font="40px 这是一段文字";
textAlign：设置垂直文本对齐方式
bord.textAlign = "start在指定位置开始/end在指定位置结束/center中心在指定位置/left居左/right居右"
textBaseline：设置水平文本对齐方式
bord.textBaseline = "bottom文本框底部/top文本框顶部/middle居中/alphabetic文字底部/hanging文字顶部"
fillText：设置被填充字体
bord.fittText = ( "文本内容" , x , y );x,y：文本的起始位置坐标
strokeText：设置无填充字体(空心字)
bord.strokeText = ( "文本内容" , x , y );

路径：

fill：填充当前的图像/路径（若路径未闭合会默认将路径首尾相连）
bord.fill( );
stroke：绘出定义好的路径（可以通过strokeStyle来设置绘制的颜色）
bord.stroke( );
beginPath：开始新的路径/重复当前路径
bord.beginPatn( );
moveTo：将路径移动到画布的指定点(定位起点)
bord.moveTo( x , y );
closePath：将当前路径首尾相连
bord.closePath( );
lineTo：创建一个新的点并将其与之前最后指定点相连(绘制路径)
bord.lineTo( x , y );
clip：显示剪切的指定区域
bord.clip( );
scale：缩放当前绘图
bord.scale( x , y );
rotate：旋转当前绘图
bord.rotate(所需旋转角度*Math.PI/180);
translate：将画布的左上角移动到指定位置后再次绘制
bord.translate( x ,y );

绘制流程：

bord.beginPath( );			//开始绘制
bord.moveTo( x , y );		//设置起点
bord.lineTo( x , y );		//设置路径
	........
bord.closePath( );			//闭合路径
bord.lineWidth = x ;		//设置线宽
bord.strokeStyle = " ";		//设置连线颜色
bord.stroke( );				//结束绘制（样式填充）
bord.beginPath( );			//再次绘制

设置格式会设置全局，直至再次设置替换之前的设置

echarts表格绘制

echarts是基于canvas的插件，可以通过填写数据来由代码自动生成表格
可以快速生成表格，但是对于出现的错误无法准确修改

<script src = " echarts.min.js></script>		//引入echarts文件
<body>
	<div id = "echart"></div>					//准备存放echarts的DOM容器
<script>
	var myChart = echart.init(document,.getElementById("echart")); //基于DOM容器初始化echart实例（将该元素设置为echart实例）
	var option = { };							//准备图表数据
	myChart.setOption(option);					//将数据放入echart实例中
</script>
</body>