当前位置：网站首页>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>
边栏推荐
猜你喜欢
Chapter 3: drawing triangles
The monthly salary of two years after graduation is 36K. It's not difficult to say
Vulnhub靶机：BOREDHACKERBLOG_ CLOUD AV
一文理解同步FIFO
Baidu map, coordinate inversion, picking coordinate position
On the H5 page, the Apple phone blocks the content when using fixed to locate the bottom of the tabbar
GPU is not used when the code is running
Introduction of model compression tool based on distiller
第 2 篇：繪制一個窗口
Latest news of awtk: new usage of grid control
随机推荐
屏幕截图推荐—Snipaste
随机数备注
第 2 篇：绘制一个窗口
How to cancel the display of the return button at the uniapp uni app H5 end the autobackbutton does not take effect
第 1 篇：搭建OpenGL环境
Wechat cloud hosting hot issues Q & A
Timer usage notes
Configure your own free Internet domain name with ngrok
What challenges does the video streaming media platform face in transmitting HD video?
解决错误： LNK2019 无法解析的外部符号
单片机STM32F103RB，BLDC直流电机控制器设计,原理图、源码和电路方案
某问答社区App x-zse-96签名分析
语料库数据处理个案实例（句子检索相关个案）
Resolution error: LNK2019 unresolved external symbol
4-operation list (loop structure)
Exness: Powell insisted on his anti inflation commitment and pointed out that recession is possible
交友相亲类软件是如何割你韭菜的
基于Distiller的模型压缩工具简介
Take my brother to make a real-time Leaderboard
Oracle-高级SQL限定查询