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>