js 利用canvas绘制直线、曲线

最新推荐文章于 2023-10-25 22:34:52 发布
最新推荐文章于 2023-10-25 22:34:52 发布
阅读量577 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zhangshan/p/5848613.html
版权 
<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>

 

转载于:https://www.cnblogs.com/zhangshan/p/5848613.html

ddlfdr71199
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js_canvas绘制曲线图
qq_31461977的博客
04-20 871
1.效果图如下
javascript -- canvas绘制曲线
weixin_34137799的博客
03-18 226
绘制曲线有几种思路： 1、通过quadraticCurveTo(controlX, controlY, endX, endY)方法来绘制二次曲线 2、通过bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY)方法，来绘制贝塞尔曲线 3、通过画圆的方法arc(x, y, radius, startAngle, ...
BeizerCurve:js canvas 实现贝塞尔曲线绘制
05-02
js canvas实现Beizer曲线绘制 闲暇时小小的想法，一下午实现，作为一个大一学生还是很有成就感的~
推荐：js用canvas画水平曲线走势图，图线自适应垂直高度
u011511086的专栏
08-29 2410
主要的画曲线走势的js文件jquery.flot.js !function(t){t.color={},t.color.make=function(e,i,o,n){var r={};return r.r=e||0,r.g=i||0,r.b=o||0,r.a=null!=n?n:1,r.add=function(t,e){for(var i=0;i<t.length;++i)r[t.charAt
在Canvas画布上绘制直线
m0_62517790的博客
12-19 320
【代码】在Canvas画布上绘制直线。
HTML5 canvas基本绘图之绘制曲线
09-27
此外，还有其他的一些方法，如`lineTo()`用于绘制直线，`quadraticCurveTo()`和`bezierCurveTo()`用于绘制二次和三次贝塞尔曲线，它们都可以结合使用来创建更复杂的曲线路径。 在实际应用中，`<canvas>`元素不仅...
html5 canvas绘制曲线动画特效.zip
08-30
在这个“html5 canvas绘制曲线动画特效.zip”压缩包中，包含了一个名为“demo.html”的文件，我们可以推测这是一个展示如何使用Canvas API创建曲线动画特效的示例。 Canvas API是一个基于矢量图形的JavaScript接口...
Html利用Canvas绘制图形
07-16
在这个主题中，“Html利用Canvas绘制图形”涵盖了多种形状的绘制方法，包括基础形状和复杂图案。接下来，我们将详细探讨如何使用Canvas API来实现这些图形。 1. **圆形**：在Canvas上绘制圆形，可以使用`arc()`方法...
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
09-28
3. **绘制线条**：使用Canvas API，我们可以绘制直线。`moveTo(x, y)`方法用来设定画笔的起始位置，`lineTo(x, y)`方法绘制从当前位置到指定位置的直线。`stroke()`方法则实际绘制线条： ```javascript ctx.moveTo...
【js类库Raphaël】使用raphael.js根据点坐标绘制平滑曲线
weixin_30516243的博客
09-30 319
一、可供参考的文档资料。 raphaeljs官网：http://raphaeljs.com/ w3c关于path的介绍：http://www.w3.org/TR/2003/REC-SVG11-20030114/paths.html mdn关于path的介绍（英文版）：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial...
js画曲线功能
06-05
纯js画曲线功能，当有数据时，替换数据即可
JS+html5 canvas实现的简单绘制折线图效果示例
12-12
本文实例讲述了JS+html5 canvas实现的简单绘制折线图效果。分享给大家供大家参考，具体如下： 1、实例代码： <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>画图</title> <style> #divContainer{ margin-top: 20px; text-align: center; } #cv{ width: 300px; height: 200px;
h5画布+贝塞尔曲线实现刻字效果
09-12
html5画布+贝塞尔曲线实现在线刻字效果。 可用于在饰品，或礼品上刻字等需求。 曲线坐标值 需在线上svg编辑器中 自行手绘获取，再填入代码中相应配置。
css+js绘制曲线轨迹（修正版）
04-10
css+js绘制曲线轨迹
Canvas 绘制线条的机制
houyanhua1的专栏
04-10 638
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &am
【图片处理】Canvas基础入门——绘制简单的线和图形
最新发布
ironprosper的博客
10-25 381
canvas 是 HTML5 的新特性，它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图形。
canvas画图：用鼠标---画曲线，直线，矩形，圆
热门推荐
好好做前端
06-08 1万+
<canvas id="canvas" width="800" height="500"></canvas> <script src="js/jquery-3.2.1.min.js"></script>var canvas = document.getElementById('canvas'); // 得到画布 var ctx = canvas.getContext('2d'); // 得到画布的上
Canvas绘图接口(曲线)
xxhy的博客
10-27 1452
绘制一段弧线使用arc()绘制弧线context.arc( centerx,centery,radius,//圆心坐标，圆弧的半径 startingAngle,endingAngle,//开始角度，结束角度 anticlockwise=false//可选，是都是逆时针的绘制，默认false顺时针绘制 ) <script type="text/javascript">
canvas教程(三) 绘制曲线
weixin_30646315的博客
07-22 193
经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 context.beginPath(); context.arc(x, y, r, startRadian, endRadian, antclockwise); context.closePath(); 我们是第...
小程序canvas曲线和直线
04-29
小程序的canvas API可以绘制曲线和直线，具体可以参考以下示例代码： 绘制曲线： ```javascript // 获取canvas绘图上下文 const ctx = wx.createCanvasContext('myCanvas') // 设置起点 ctx.moveTo(50, 200) // 绘制二次贝塞尔曲线 ctx.quadraticCurveTo(150, 50, 250, 200) // 设置线条颜色和宽度 ctx.setStrokeStyle('#ff0000') ctx.setLineWidth(2) // 绘制曲线 ctx.stroke() // 绘制起点和控制点 ctx.beginPath() ctx.arc(50, 200, 3, 0, 2 * Math.PI) ctx.setFillStyle('#0000ff') ctx.fill() ctx.beginPath() ctx.arc(150, 50, 3, 0, 2 * Math.PI) ctx.setFillStyle('#0000ff') ctx.fill() // 绘制终点和控制点 ctx.beginPath() ctx.arc(250, 200, 3, 0, 2 * Math.PI) ctx.setFillStyle('#0000ff') ctx.fill() ctx.beginPath() ctx.moveTo(150, 50) ctx.lineTo(250, 200) ctx.setStrokeStyle('#0000ff') ctx.setLineWidth(1) ctx.stroke() // 绘制文字 ctx.setFontSize(20) ctx.setFillStyle('#000000') ctx.fillText("Quadratic Curve", 100, 250) // 绘制完成 ctx.draw() ``` 绘制直线： ```javascript // 获取canvas绘图上下文 const ctx = wx.createCanvasContext('myCanvas') // 设置起点 ctx.moveTo(50, 50) // 绘制直线 ctx.lineTo(250, 50) // 设置线条颜色和宽度 ctx.setStrokeStyle('#ff0000') ctx.setLineWidth(2) // 绘制直线 ctx.stroke() // 绘制起点和终点 ctx.beginPath() ctx.arc(50, 50, 3, 0, 2 * Math.PI) ctx.setFillStyle('#0000ff') ctx.fill() ctx.beginPath() ctx.arc(250, 50, 3, 0, 2 * Math.PI) ctx.setFillStyle('#0000ff') ctx.fill() // 绘制文字 ctx.setFontSize(20) ctx.setFillStyle('#000000') ctx.fillText("Line", 100, 100) // 绘制完成 ctx.draw() ``` 以上示例代码中，`wx.createCanvasContext('myCanvas')`表示获取canvas绘图上下文，其中'myCanvas'为canvas组件的id。`ctx.moveTo(x, y)`表示设置起点，`ctx.lineTo(x, y)`表示绘制直线，`ctx.quadraticCurveTo(cpx, cpy, x, y)`表示绘制二次贝塞尔曲线。`ctx.setStrokeStyle(color)`和`ctx.setLineWidth(width)`分别设置线条颜色和宽度。`ctx.beginPath()`和`ctx.arc(x, y, r, startAngle, endAngle)`表示绘制圆形起点、终点和控制点。`ctx.setFillStyle(color)`设置填充颜色。`ctx.fillText(text, x, y)`表示绘制文字。`ctx.draw()`表示绘制完成。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值