首页 > 代码库 > js 利用canvas绘制直线、曲线
js 利用canvas绘制直线、曲线
<body> <!--画板--> // 当浏览器不支持的时候才会出现文字 <canvas id="canvas" style="background-color: black;">您当前的版本不支持 </canvas> <script type="text/javascript"> // 拿到画板 var canvas = document.getElementById(‘canvas‘); canvas.width = 1000; canvas.height = 1000; // 拿到上下文 var context = canvas.getContext(‘2d‘); // 设置线条的颜色 context.strokeStyle = ‘red‘; // 设置线条的宽度 context.lineWidth = 5; // 绘制直线 context.beginPath(); // 起点 context.moveTo(200, 200); // 终点 context.lineTo(500, 200); context.closePath(); context.stroke(); // 绘制弧线 context.beginPath(); /* * params * 圆心x坐标 * 圆心y坐标 * 半径 * 起始角度 * 结束角度 * 方向，true 逆时针 false 顺时针 默认false，不写表示false */ context.arc(200,200,100,0,Math.PI/2,false); context.closePath(); context.stroke(); context.strokeStyle = ‘red‘; context.arc(200,200,100,0,Math.PI/2, true); context.closePath(); context.stroke(); </script></body>
js 利用canvas绘制直线、曲线
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。