当前位置：网站首页>Chapter 3 curve graph of canvas
Chapter 3 curve graph of canvas
2022-06-24 07:58:00 【yxqq378287007】
《canvas》 The first 3 Chapter Curvilinear figures
The first 3 Chapter Curvilinear figures
3.1 Introduction to curve graph
An arc is part of a circle , Every point on the arc has the same curvature , Curves contain arcs .
3.2 circular
3.2.1 Circular profile
cxt.beginPath();
cxt.arc(x, y, radius , Starting angle , End angle , anticlockwise);
cxt.closePath();
Start and end angles use radians , such as 360*Math.PI/180.
anticlockwise Default false, clockwise .
3.2.2 Stroke circle
cxt.beginPath();
cxt.arc(x, y, radius , Starting angle , End angle , anticlockwise);
cxt.closePath();
cxt.strokeStyle = " Color value ";
cxt.stroke();
- round
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // The whole circle cxt.beginPath(); cxt.arc(120, 80, 50, 0, 360 * Math.PI / 180); //cxt.closePath(); // Stroke cxt.strokeStyle = "HotPink"; cxt.stroke(); // Semicircle cxt.beginPath(); cxt.arc(80, 80, 50, 0, 180 * Math.PI / 180, true); cxt.closePath(); // Stroke cxt.strokeStyle = "HotPink"; cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- arc
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.beginPath(); cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true); cxt.closePath(); cxt.strokeStyle = "HotPink"; cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
3.2.3 Packing circle
cxt.beginPath();
cxt.arc(x, y, radius , Starting angle , End angle , anticlockwise);
cxt.closePath();
cxt.fillStyle = " Color value ";
cxt.fill();
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // The whole circle cxt.beginPath(); cxt.arc(120, 80, 50, 0, 360 * Math.PI / 180); //cxt.closePath(); // Stroke cxt.fillStyle = "#9966FF"; cxt.fill(); // Semicircle cxt.beginPath(); cxt.arc(80, 80, 50, 0, 180 * Math.PI / 180, true); cxt.closePath(); // Stroke cxt.fillStyle = "HotPink"; cxt.fill(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
3.3 Arc
arc() and arcTo().
3.3.1 arc() Method draw an arc
cxt.beginPath();
cxt.arc(x, y, radius , Starting angle , End angle , anticlockwise);
cxt.strokeStyle = " Color value ";
cxt.stroke();
anticlockwise Default false, clockwise .
- Arc
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.beginPath(); cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true); //cxt.closePath(); // closed cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- Arc + A straight line
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // Draw a line //cxt.beginPath(); cxt.moveTo(20, 20); cxt.lineTo(70, 20); cxt.stroke(); // Draw the arc + A straight line cxt.beginPath(); cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true); cxt.moveTo(120, 70); cxt.lineTo(120, 120); cxt.stroke(); /* // Draw a line cxt.beginPath(); cxt.moveTo(20, 20); cxt.lineTo(70, 20); cxt.stroke(); // Draw the arc cxt.beginPath(); cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true); cxt.stroke(); // Draw a line cxt.beginPath(); cxt.moveTo(120, 70); cxt.lineTo(120, 120); cxt.stroke(); */ } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
3.3.2 arcTo() Method draw an arc
cxt.arcTo(cx, cy, x2, y2, radius)
cx, cy Control point coordinates
x2,y2 End point coordinates
x1,y1 Start point coordinates ,moveTo() or lineTo() Provide .
arcTo() Use the starting point 、 The control points 、 The included angle formed by the end point , Draw a section tangent to both sides of the included angle and with a radius of radius Short arc of . When the starting point is not the starting point of the arc , Will draw a straight line from the starting point to the starting point of the arc .Arc
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.moveTo(20, 20); //cxt.lineTo(70, 20); cxt.arcTo(120, 20, 120, 70, 50); cxt.lineTo(120, 120); cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- Rounded rectangle
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.moveTo(40, 20); cxt.lineTo(160, 20); cxt.arcTo(180, 20, 180, 40, 20); cxt.moveTo(180, 40); cxt.lineTo(180, 110); cxt.arcTo(180, 130, 160, 130, 20); cxt.moveTo(160, 130); cxt.lineTo(40, 130); cxt.arcTo(20, 130, 20, 110, 20); cxt.moveTo(20, 110); cxt.lineTo(20, 40); cxt.arcTo(20, 20, 40, 20, 20); cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- Rounded rectangle function encapsulation
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); createRoundedRect(cxt, 100, 100, 20, 20, 20); cxt.fillStyle = "HotPink"; cxt.fill(); } /* * createRoundedRect() Used to draw rounded rectangles * width、height： Length and width, respectively * r： Indicates the fillet radius * offsetX、offsetY： Represent the vertex coordinates of the upper left corner respectively */ function createRoundedRect(cxt, width, height, r, offsetX, offsetY) {
cxt.beginPath(); cxt.moveTo(offsetX + r, offsetY); //cxt.lineTo(offsetX + width - r, offsetY); cxt.arcTo(offsetX + width, offsetY, offsetY + width, offsetY + r, r); //cxt.lineTo(offsetX + width, offsetY + height - r); cxt.arcTo(offsetX + width, offsetY + height, offsetX + width - r, offsetY + height, r); //cxt.lineTo(offsetX + r, offsetY + height); cxt.arcTo(offsetX, offsetY + height, offsetX, offsetY + height - r, r); //cxt.lineTo(offsetX, offsetY + r); cxt.arcTo(offsetX, offsetY, offsetX + r, offsetY, r); //cxt.closePath(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
3.4 Quadratic Bessel curve
cxt.quadraticCurveTo(cx, cy, x2, y2);
cx,cy Control point coordinates ,x2,y2 End point coordinates .
moveTo() or lineTo() Provide a starting point .
- Quadratic Bessel curve
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.moveTo(30, 120); cxt.quadraticCurveTo(100, 20, 160, 120); cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- Draw bubbles with quadratic Bessel curve
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.moveTo(75, 25); cxt.quadraticCurveTo(25, 25, 25, 62); cxt.quadraticCurveTo(25, 100, 50, 100); cxt.quadraticCurveTo(50, 120, 30, 125); cxt.quadraticCurveTo(60, 120, 65, 100); cxt.quadraticCurveTo(125, 100, 125, 62); cxt.quadraticCurveTo(125, 25, 75, 25); cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
3.5 Three Bessel curves
cxt.bezierCurveTo(cx1, cy1, cx2, cy2,x2, y2);
cx1,cy1 The control points 1 coordinate ,cx2,cy2 The control points 2 coordinate ,x2,y2 End point coordinates .
moveTo() or lineTo() Provide a starting point .
- Three Bessel curves
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); // Draw the Bessel curve three times var startX = 20; var startY = 80; var cx1 = 20; var cy1 = 20; var cx2 = 120; var cy2 = 120; var endX = 120; var endY = 60; cxt.moveTo(startX, startY); cxt.bezierCurveTo(cx1, cy1, cx2, cy2, endX, endY); cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- Draw a heart with cubic Bessel curve
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.moveTo(75, 40); cxt.bezierCurveTo(75, 37, 70, 25, 50, 25); cxt.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); cxt.bezierCurveTo(20, 80, 40, 102, 75, 120); cxt.bezierCurveTo(110, 102, 130, 80, 130, 62.5); cxt.bezierCurveTo(130, 62.5, 130, 25, 100, 25); cxt.bezierCurveTo(85, 25, 75, 37, 75, 40); cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- Bessel curve drawing N Leaf grass
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var n = 5; var rMin = 20*0.4; var rMax = 80*1.5; createLeaf(cxt, n, cnv.width/2, cnv.height/2, rMin, rMax); cxt.fillStyle = "#00FF99";// Light green cxt.fill(); } /* * createLeaf() Used to draw N Leaf grass * n：n slice * centerX、centerY： Coordinates of the center of the flower * rMin： Control the size of flowers * rMax： Control petal length */ function createLeaf(cxt, n, centerX, centerY, rMin, rMax) {
cxt.beginPath(); cxt.moveTo(centerX, centerY + rMin); var degree = 2*Math.PI/n; for (var i = 1; i < n + 1; i++) {
// Calculate the control point coordinates var cx1 = centerX + rMax * Math.sin((i - 1) * degree); var cy1 = centerY + rMax * Math.cos((i - 1) * degree); var cx2 = centerX + rMax * Math.sin(i * degree); var cy2 = centerY + rMax * Math.cos(i * degree); // Calculate the coordinates of the end point var x = centerX + rMin * Math.sin(i * degree); var y = centerY + rMin * Math.cos(i * degree); cxt.bezierCurveTo(cx1, cy1, cx2, cy2, x, y); } cxt.closePath(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
<!-- here , We continuously define a multi segment Bezier curve connected end to end in a path , The starting point and ending point of each cubic Bessel curve fall on the center of the circle （centerX, centerY）、 The radius is rMin On the circle of , The two control points of each arc fall at the center of the circle （centerX, centerY）、 The radius is rMax On the circle of , So it was formed N The figure of leaf grass . among , The starting point 、 The coordinates of the end point and control point are calculated using sine and cosine functions . in general , Using quadratic or cubic Bezier curves to draw a graph is quite challenging , Because it's not like in vector graphics software Adobe Illustrator（ abbreviation AI） There's instant visual feedback in the （ What you see is what you get ）. So it is more troublesome to draw complex figures with it . But in theory , Any complex figure can be drawn with Bezier curve ！ This is where the Bezier curve is powerful . -->
3.6 Drawing fan
- Sector
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.beginPath(); cxt.moveTo(100, 75); cxt.arc(cnv.width/2, cnv.height/2, 50, 30*Math.PI/180, 120*Math.PI/180, false); cxt.closePath(); cxt.strokeStyle = "HotPink"; cxt.stroke(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- Sector function encapsulation
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript"> function $$(id) {
return document.getElementById(id); } window.onload = function () {
var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); createSector(cxt, cnv.width/2, cnv.height/2, 50, 30, 120); cxt.fillStyle = "HotPink"; cxt.fill(); } function createSector(cxt, x, y, r, angle1, angle2) {
cxt.beginPath(); cxt.moveTo(x, y); cxt.arc(x, y, r, angle1*Math.PI/180, angle2*Math.PI/180, false); cxt.closePath(); } </script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
边栏推荐
- 4-operation list (loop structure)
- Bit operation
- 开放合作，共赢未来 | 福昕鲲鹏加入金兰组织
- 10. Tencent cloud IOT device side learning - firmware upgrade
- Wechat cloud hosting hot issues Q & A
- Do you still have the opportunity to become a machine learning engineer without professional background?
- Error:Kotlin: Module was compiled with an incompatible version of Kotlin. The binary version of its
- Chapter 3: drawing triangles
- SCM stm32f103rb, BLDC DC motor controller design, schematic diagram, source code and circuit scheme
- Timer usage notes
猜你喜欢
爬虫基础B1——Scrapy(B站学习笔记)
用Ngrok 配置属于自己的免费外网域名
一文理解同步FIFO
【资料上新】迅为基于3568开发板的NPU开发资料全面升级
Chapitre 2: dessiner une fenêtre
SCM stm32f103rb, BLDC DC motor controller design, schematic diagram, source code and circuit scheme
First acquaintance with JUC - day01
Chapter 3: drawing triangles
火线，零线，地线，你知道这三根线的作用是什么吗？
云开发谁是卧底小程序源码
随机推荐
Terminal network in VPN client connection settings of router
『C语言』系统日期＆时间
AWTK 最新动态：Grid 控件新用法
Duilib display memory picture
开放合作，共赢未来 | 福昕鲲鹏加入金兰组织
热赛道上的冷思考：乘数效应才是东数西算的根本要求
Los Angeles p1051 who won the most Scholarships
What challenges does the video streaming media platform face in transmitting HD video?
Moonwell Artemis现已上线Moonbeam Network
交友相亲类软件是如何割你韭菜的
. No main manifest attribute in jar
Chapter 2 line graph of canvas
Teach you how to use the reflect package to parse the structure of go - step 2: structure member traversal
Part 2: drawing a window
5-if语句（选择结构）
On the H5 page, the Apple phone blocks the content when using fixed to locate the bottom of the tabbar
面试中的最常被问到的两种锁
第 1 篇：搭建OpenGL环境
云开发谁是卧底小程序源码
[C language] system date & time