用Canvas写的一些图形

最新推荐文章于 2024-07-07 06:46:55 发布

原创最新推荐文章于 2024-07-07 06:46:55 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

历史笔记专栏收录该内容

9 篇文章

订阅专栏

本文分享了使用Canvas绘制各种图形的方法，包括线条、圆形、三角形等，并提供了实用的JavaScript函数实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中，需要用Canvas画一些图形，和大家分享一下。

由于需要常用到这些图形，就将图形封装成了一个一个的方法，在这里和大家分享一下这些方法吧！

用到的一些变量(有一些变量可能没写出来，大家看了就补一下吧)：<pre name="code" class="html">lineWidth="1";

<pre name="code" class="html">color="blue";

strokeStyle="red";

fillStyle="blue";

//绘制横线

function drawhengxian(startPoint, l, color) {
		context.beginPath();
		context.moveTo(startPoint.x, startPoint.y);
		context.lineTo(startPoint.x + l, startPoint.y);

		context.lineWidth = lineWidth;
		context.strokeStyle = color;
		context.stroke();

	}

//绘制折线
function drawZheXian(points) {
		// 绘制折现
		context.beginPath();
		context.moveTo(points[0].x, points[0].y);
		for (var i = 1; i < points.length; i++) {
			context.lineTo(points[i].x, points[i].y);
		}

		context.lineWidth = lineWidth;
		context.strokeStyle = strokeStyle;
		context.stroke();
	}
//绘制竖线
function drawshuxian(starPoint, l) {
		context.beginPath();
		context.moveTo(starPoint.x, starPoint.y);
		context.lineTo(starPoint.x, starPoint.y - l);

		context.lineWidth = lineWidth;
		context.strokeStyle = strokeStyle;
		context.stroke();
	}
//绘制空心圆
function drawEmptyArc(center, radius) {
		context.beginPath();
		context.arc(center.x, center.y, radius, 0, 2 * Math.PI, false);
		context.fillStyle = fillStyle;
		context.fill();

		context.lineWidth = lineWidth;
		context.strokeStyle = strokeStyle;
		context.stroke();

	}
//绘制实心三角形（即有颜色填充的三角形）
function drawshendanshu(points, colors) {
		// 绘制折现
		context.beginPath();
		context.moveTo(points[0].x, points[0].y);
		for (var i = 1; i < points.length; i++) {
			context.lineTo(points[i].x, points[i].y);
		}
		//结束绘制
		context.closePath();

		// 进行绘图处理
		context.fillStyle = colors;

		// 填充路径
		context.fill();

	}
//绘制雪花图案
function drawCha(center, l) {

		context.beginPath();

		context.moveTo(center.x - l, center.y - l);
		context.lineTo(center.x + l, center.y + l);

		context.moveTo(center.x - l * 1.414, center.y);
		context.lineTo(center.x + l * 1.414, center.y);

		context.moveTo(center.x - l, center.y + l);
		context.lineTo(center.x + l, center.y - l);

		context.lineWidth = lineWidth;
		context.strokeStyle = strokeStyle;
		context.stroke();

	}
//绘制电源（即三条长短不一的竖线） 
function drawsanshuxian(center, l, isAnode) {
		context.beginPath();

		if (isAnode) {

			context.moveTo(center.x - l, center.y - l * 3);
			context.lineTo(center.x - l, center.y + l * 3);

			context.moveTo(center.x, center.y - l * 2);
			context.lineTo(center.x, center.y + l * 2);

			context.moveTo(center.x + l, center.y + l);
			context.lineTo(center.x + l, center.y - l);

		} else {

			context.moveTo(center.x - l, center.y + l);
			context.lineTo(center.x - l, center.y - l);

			context.moveTo(center.x, center.y - l * 2);
			context.lineTo(center.x, center.y + l * 2);

			context.moveTo(center.x + l, center.y - l * 3);
			context.lineTo(center.x + l, center.y + l * 3);

		}

		context.lineWidth = lineWidth;
		context.strokeStyle = strokeStyle;
		context.stroke();

	}
//绘制2个半圆
function drawBanYuan2(center, l, isUp) {

		var radius = l / 4.0;
		var i;

		for (i = 0; i < 2; i++) {
			context.beginPath();
			if (i == 0) {
				context.arc(center.x + radius, center.y, radius, 0, Math.PI, isUp);
			} else {

				context.arc(center.x + 3 * radius, center.y, radius, 0, Math.PI, isUp);
			}

			context.lineWidth = lineWidth;
			context.strokeStyle = strokeStyle;
			context.stroke();
		}

	}
//电阻线（好多小半圆组成，大家可以试一下）
function drawXianQuan(startPoint, l) {

		var r = l / 5;

		var potions1 = [];

		for (var i = 0; i < 5; i++) {
			var px = startPoint.x + i * r;
			var py = startPoint.y;
			potions1.push({
				x: px,
				y: py
			});
		}
		var potions2 = [];

		for (var i = 0; i < 5; i++) {
			var px = startPoint.x + i * r;
			var py = startPoint.y + l / 3;
			potions2.push({
				x: px,
				y: py
			});
		}

		context.beginPath();

		context.moveTo(startPoint.x, startPoint.y + l / 6);
		context.lineTo(startPoint.x + l, startPoint.y + l / 6);

		context.lineWidth = lineWidth;
		context.strokeStyle = strokeStyle;
		context.stroke();

		var radius = l / 10;

		for (var i = 0; i < potions1.length; i++) {
			context.beginPath();

			var isTop;

			if (i % 2 == 0) {
				isTop = true;
			} else {
				isTop = false;
			}

			context.arc(potions1[i].x + radius, potions1[i].y, radius, 0, Math.PI, isTop);
			context.lineWidth = lineWidth;
			context.strokeStyle = strokeStyle;
			context.stroke();
		}

		for (var i = 0; i < potions2.length; i++) {
			context.beginPath();

			var isTop;

			if (i % 2 == 0) {
				isTop = true;
			} else {
				isTop = false;
			}

			context.arc(potions2[i].x + radius, potions2[i].y, radius, 0, Math.PI, isTop);
			context.lineWidth = lineWidth;
			context.strokeStyle = strokeStyle;
			context.stroke();
		}
	}
//绘制实体圆
function drawFillArc(center, radius) {
		context.beginPath();
		context.arc(center.x, center.y, radius, 0, 2 * Math.PI, false);
		context.fillStyle = "black";
		context.fill();
	}
//绘制长方形
function drawFillRect(x, y, a, b) {

		var c = document.getElementById("myCanvas");
		var cxt = c.getContext("2d");
		cxt.strokeRect(x, y, a, b);
	}