js 利用canvas绘制直线曲线
Posted 囧囧(>_<)
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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绘制直线曲线的主要内容，如果未能解决你的问题，请参考以下文章