想了解更全面的canvas API可以点击右侧: canvas简介及常用API

canvas绘制折线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background-color: #99CCFF;
			}

			#canvas {
				background-color: #fff;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;

			}
		</style>
	</head>
	<body>
		<canvas id="canvas">
			您的浏览器不支持，canvas标签
		</canvas>

		<script type="text/javascript">
			// 获取画布
			var canvas = document.getElementById('canvas');

			// 设置画布的宽高
			canvas.width = 800;
			canvas.height = 600;

			// 获取画笔
			var ctx = canvas.getContext('2d');

			/* 
				canvas 是基于状态的绘制
				lineWidth:
					值可以是number类型的，也可以是字符串类型，但是必须是整数
			 */

			// 第一条线段  #99CC33

			ctx.beginPath();
			// 将笔移动到指定的坐标位置
			ctx.moveTo(100, 100);
			// 设置轮廓颜色
			ctx.strokeStyle = '#99CC33';
			ctx.lineWidth = "1";
			ctx.lineTo(300, 300); //绘制线段
			ctx.lineTo(100, 500);
			ctx.stroke(); //填充绘制的路径（以边框）

			ctx.beginPath(); //创建一条新的路径
			// 第二个折线	#FF9900
			// 将笔移动到指定的坐标位置
			ctx.moveTo(300, 100);
			ctx.lineTo(500, 300); //绘制线段
			ctx.lineTo(300, 500);
			ctx.strokeStyle = '#F90';
			ctx.stroke(); //填充绘制的路径（以边框）

			ctx.beginPath();
			// 第三条 折线 #FFCC00
			// 将笔移动到指定的坐标位置
			ctx.moveTo(500, 100);
			ctx.lineTo(700, 300); //绘制线段
			ctx.lineTo(500, 500);
			ctx.strokeStyle = '#FFCC00';
			ctx.fillStyle = "#CCCCCC";
			ctx.lineWidth = 7;
			ctx.closePath(); //闭合路径
			ctx.stroke(); //填充绘制的路径（描边）
			ctx.fill(); //绘制填充路径(填充)
		</script>
	</body>
</html>

canvas使用透明度（globalAlpha）

            ctx.beginPath();
			// 第三条 折线 #FFCC00
			// 将笔移动到指定的坐标位置
			ctx.moveTo(500,100);
			ctx.lineTo(700,300);//绘制线段
			ctx.lineTo(500,500);
			ctx.strokeStyle='#FFCC00';
			ctx.fillStyle="#CCCCCC";
			ctx.lineWidth=7;//设置线宽
			
			// 设置透明度 值是0（透明） - 1.0 (不透明)
			ctx.globalAlpha=0.2; 
			
			ctx.closePath();//闭合路径
			ctx.stroke();//填充绘制的路径（描边）
			ctx.fill();//绘制填充路径(填充)

canvas使用线性渐变createLinearGradient

<script type="text/javascript">
			// 获取画布
			var canvas =document.getElementById('canvas');
			
			// 设置画布的宽高
			canvas.width=800;
			canvas.height=600;
			
			// 获取画笔
			var ctx =canvas.getContext('2d');
			ctx.beginPath();
			// 创建矩形
			ctx.rect(200,100,400,400);
			// 添加线性渐变线
			var grd= ctx.createLinearGradient(200,300,600,300);
			
			// 添加颜色断点
			grd.addColorStop(0,'black');
			grd.addColorStop(0.5,'white');
			grd.addColorStop(1,'black');
			
			// 应用 渐变
			ctx.fillStyle=grd;
			
			ctx.closePath();//闭合路径
			ctx.fill();//绘制填充路径(填充)
			
		</script>

<script type="text/javascript">
			// 获取画布
			var canvas = document.getElementById('canvas');

			// 设置画布的宽高
			canvas.width = 800;
			canvas.height = 600;

			// 获取画笔
			var ctx = canvas.getContext('2d');

			// 添加线性渐变线
			var grd = ctx.createLinearGradient(200, 300, 600, 300);
			// 添加颜色断点
			grd.addColorStop(0, '#FF6600');
			grd.addColorStop(0.25, '#99CC33');
			grd.addColorStop(0.5, '#3366CC');
			grd.addColorStop(0.75, '#CCCC33');
			grd.addColorStop(1, '#FF9933');
			// 应用 渐变
			ctx.fillStyle = grd;
			ctx.strokeStyle = grd;

			// 描边矩形
			ctx.strokeRect(100, 50, 300, 50);
			ctx.strokeRect(100, 100, 150, 50);
			ctx.strokeRect(100, 150, 450, 50);
			// 填充矩形
			ctx.fillRect(200, 300, 300, 50);
			ctx.fillRect(200, 350, 150, 50);
			ctx.fillRect(200, 450, 450, 50);
		</script>

canvas使用径向渐变createRadialGradient

<script type="text/javascript">
			// 获取画布
			var canvas = document.getElementById('canvas');

			// 设置画布的宽高
			canvas.width = 800;
			canvas.height = 600;

			// 获取画笔
			var ctx = canvas.getContext('2d');
			// 渐变线 径向的 
			var grd = ctx.createRadialGradient(400, 300, 100, 400, 300, 200);
			// 添加颜色断点
			grd.addColorStop(0, '#FF6600');
			grd.addColorStop(0.25, '#99CC33');
			grd.addColorStop(0.5, '#3366CC');
			grd.addColorStop(0.75, '#CCCC33');
			grd.addColorStop(1, '#FF9933');

			ctx.fillStyle = grd;

			ctx.fillRect(100, 100, 600, 400);
</script>

canvas使用lineJoin属性

		<script type="text/javascript">
			// 获取画布
			var canvas = document.getElementById('canvas');

			// 设置画布的宽高
			canvas.width = 800;
			canvas.height = 600;

			// 获取画笔
			var ctx = canvas.getContext('2d');


			/* 
				canvas 是基于状态的绘制
				lineWidth:
					值可以是number类型的，也可以是字符串类型，但是必须是整数
			 */

			// 第一条线段  #99CC33

			ctx.beginPath();
			// 将笔移动到指定的坐标位置
			ctx.moveTo(100, 100);
			// 设置轮廓颜色
			ctx.strokeStyle = '#99CC33';
			ctx.lineWidth = "20";

			// 设置两条线拐角的样式
			ctx.lineJoin = 'round'; //圆角
			ctx.lineTo(300, 300); //绘制线段
			ctx.lineTo(100, 500);
			ctx.stroke(); //填充绘制的路径（以边框）

			ctx.beginPath(); //创建一条新的路径
			// 第二个折线	#FF9900
			// 将笔移动到指定的坐标位置
			ctx.moveTo(300, 100);
			ctx.lineTo(500, 300); //绘制线段
			ctx.lineTo(300, 500);
			ctx.strokeStyle = '#F90';

			// 设置两条线拐角的样式
			ctx.lineJoin = 'bevel'; //斜角
			ctx.stroke(); //填充绘制的路径（以边框）

			ctx.beginPath();
			// 第三条 折线 #FFCC00
			// 将笔移动到指定的坐标位置
			ctx.moveTo(500, 100);
			ctx.lineTo(700, 300); //绘制线段
			ctx.lineTo(500, 500);
			ctx.strokeStyle = '#FFCC00';
			// 设置两条线拐角的样式
			ctx.lineJoin = 'miter'; //直角
			ctx.stroke(); //填充绘制的路径（描边）
		</script>

canvas使用lineCap属性

<script type="text/javascript">
			// 获取画布
			var canvas = document.getElementById('canvas');

			// 设置画布的宽高
			canvas.width = 800;
			canvas.height = 600;

			// 获取画笔
			var ctx = canvas.getContext('2d');
			// 设置线的样式
			ctx.lineWidth = 40;
			ctx.strokeStyle = '#99CCFF'

			ctx.beginPath();
			ctx.moveTo(100, 100);
			ctx.lineTo(700, 100);
			// 设置两端的线帽
			ctx.lineCap = 'butt'; //方形
			ctx.stroke();

			ctx.beginPath();
			ctx.moveTo(100, 300);
			ctx.lineTo(700, 300);
			// 设置两端的线帽
			ctx.lineCap = 'round'; //圆形
			ctx.stroke();

			ctx.beginPath();
			ctx.moveTo(100, 500);
			ctx.lineTo(700, 500);
			// 设置两端的线帽
			ctx.lineCap = 'square'; //方形
			ctx.stroke();

			// 绘制两条基准线
			ctx.lineWidth = 3;
			ctx.strokeStyle = 'lightcoral'
			ctx.beginPath();
			ctx.moveTo(100, 0);
			ctx.lineTo(100, 600);
			ctx.stroke()

			ctx.beginPath();
			ctx.moveTo(700, 0);
			ctx.lineTo(700, 600);
			ctx.stroke()
		</script>

制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！

# html5
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区