Html5 canvas绘制折线、使用线性渐变、径向渐变和lineJoin，lineCap属性

℡啨天丶

已于 2022-08-08 11:54:59 修改

阅读量356

点赞数

分类专栏： HTML5必拿下文章标签： javascript 前端 html

于 2022-08-08 11:54:34 首次发布

本文链接：https://blog.csdn.net/m0_65037325/article/details/126224706

版权

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

canvas绘制折线

canvas使用透明度（globalAlpha）

canvas使用线性渐变createLinearGradient

canvas使用径向渐变createRadialGradient

canvas使用lineJoin属性

canvas使用lineCap属性

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(7

最低0.47元/天解锁文章

℡啨天丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html5 canvas绘制折线、使用线性渐变、径向渐变和lineJoin，lineCap属性

想了解更全面的canvas API可以点击右侧: canvas简介及常用APIcanvas使用透明度（globalAlpha）canvas使用线性渐变createLinearGradientcanvas使用径向渐变createRadialGradientcanvas使用lineJoin属性canvas使用lineCap属性......
复制链接

扫一扫