canvas笔记-arcTo的使用及绘制弯月
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-arcTo的使用及绘制弯月
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先介紹下這個函數
context.arcTo(x1,?y1,?x2,?y2,?r);
其中x1為弧的起點x坐標；
其中y1為弧的起點y坐標；
其中x2為弧的終點x坐標；
其中y2為弧的終點y坐標；
其中r為弧的半徑。
?
程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.beginPath();context.moveTo(150, 150);context.arcTo(650, 150, 650, 650, 300);context.lineWidth = 6;context.strokeStyle = "red";context.stroke();//baselinecontext.beginPath();context.moveTo(150, 150);context.lineTo(650, 150);context.lineTo(650, 650);context.lineWidth = 2;context.strokeStyle = "gray";context.stroke();}</script></body> </html>?
下面是繪制給彎月
程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.arc(400, 400, 300, 0.5 * Math.PI, 1.5 * Math.PI, true);context.moveTo(400, 100);context.arcTo(1200, 400, 400, 700, (400 - 100) * dis(400, 100, 1200, 400) / (1200 - 400));context.stroke();}function dis(x1, y1, x2, y2){return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));}</script></body> </html></body> </html>這里月亮最左邊的那條邊是圓弧，正園，不是橢圓，所以一開始使用arc去畫給半圓，然后再使用arcTo去畫弧。
這里來說下arcTo中半徑是怎么算的
也就是(400 - 100) * dis(400, 100, 1200, 400) / (1200 - 400)
?
這里aco的tan為AH/HC也為R/AC
也就是R = (AH * AC) / HC
這個AH為400 - 100
AC為AH平方+HC的平方 開根號，也就是dis中的計算
HC為1200 - 400
總結
以上是生活随笔為你收集整理的canvas笔记-arcTo的使用及绘制弯月的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring Boot文档阅读笔记=Ca
- 下一篇： two.js文档阅读笔记-two.js的