<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas绘制路径</title>
<style>
body{margin: 0;overflow: hidden;}
#test{background-color: antiquewhite;}
</style>
</head>
<body>
<canvas id="test"></canvas>
<script>
/** @type {HTMLCanvasElement} */
const cvs = document.getElementById("test");
cvs.width = 2000;
cvs.height = 2000;
const ctx = cvs.getContext('2d');
ctx.lineWidth=10;
/*
1.开始建立路径:beginPath()
2.向路径集合中添加子路径:
[
形状; closePath() 可选,
moveTo(x,y); 形状; closePath() 可选,
moveTo(x,y); 形状; closePath() 可选,
canvas绘制路径(直线、圆、切线圆弧、二次贝塞尔曲线、三次贝塞尔曲线、矩形)
最新推荐文章于 2022-11-16 17:05:52 发布