HTML5 Canvas ( 圓和切點曲線的繪製 ) arc, arcTo

時間 2019-11-26

標籤 html5 html canvas 切點曲線繪製 arc arcto 欄目 HTML5 简体版

原文原文鏈接

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; outline: none; border: none; } #canvas{ width: 7rem; margin: .25rem 0 0 1.5rem; border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="1000" height="600"></canvas> </body> </html> <script type="text/javascript"> /** * rem 佈局初始化 */ $('html').css('font-size', $(window).width()/10); /** * 獲取 canvas 畫布 * 獲取 canvas 繪圖上下文環境 */ var canvas = $('#canvas')[0]; var cxt = canvas.getContext('2d'); /** * 畫圓 arc( 圓心的橫座標, 圓心的縱座標, 半徑的長度, 繪製的起始角度, 繪製的終結角度, 是否逆時針 ) * 圓弧 arcTo(第一個控制點的橫座標, 第一個個控制點的縱座標, 第二我的控制點的橫座標, 第二個控制點的縱座標, 圓弧的半徑) */ /* cxt.arc(500, 300, 100, 0, 2*Math.PI, false); cxt.fill(); */ cxt.save(); cxt.lineWidth = 3; cxt.strokeStyle = 'red'; cxt.moveTo(100, 100); cxt.arcTo(700, 100, 700, 500, 300); cxt.stroke(); cxt.restore(); /** * 輔助線 */ cxt.strokeStyle = 'green'; cxt.moveTo(100, 100); cxt.lineTo(700, 100); cxt.lineTo(700, 500); cxt.stroke(); </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。