`
vawe666
  • 浏览: 40463 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5-canvas画一条直线

 
阅读更多

<!--canvas 标签-->

<canvas width="500" height="800"    id="canvas">
</canvas>

<!--获取画布DOM  还不可以操作-->
var canvas=document.getElementById('canvas');

<!--   //设置绘图环境-->

var cxt=canvas.getContext('2d');





//开启新路径
cxt.beginPath();
//设定画笔的宽度
cxt.lineWidth=10;
//设置画笔的颜色
cxt.strokeStyle="#ff9900";
//设定笔触的位置
cxt.moveTo(20,20);
//设置移动的方式
cxt.lineTo(100,20);
//画线
cxt.stroke();
//封闭路径
cxt.closePath();

分享到:
评论

相关推荐

    canvas实现的画板

    用html5的canvas实现的一个简易的画板,可以画直线、矩形、圆形,可以选择线条粗细和线条颜色’

    html5 鼠标画直线

    在html5 canvas 通过鼠标点击、拖拽、放开画出一条直线!

    html5 Canvas画图教程(5)—canvas里画曲线之arc方法

    在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊,我还没摸透,所以要一步步尝试。 canvas里画曲线的难点之一,就在于他连曲线的函数就有4个!分别是arc,...

    HTML5基于Canvas实现的火焰喷射动画效果源码

    用鼠标拖动一条直线,直线长度表示火焰喷射的力度,另外,火焰在运动中还可以反射效果哦。

    html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点

    如果你还不知道Canvas是什么,可以看看上一篇. 在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形。在Canvas中也是如此。 在开始之前我们先拿出画布和画笔: 复制代码代码如下: var cvs = document....

    html5如何在Canvas中实现自定义路径动画示例

    这里所谓的自定义路径不单单包括一条直线,也许是多条直线的运动组合,甚至还包含了贝塞尔曲线,因此,这个动画也许是下面这个样子的: 那么如何才能在canvas中实现这种动画效果呢?其实很简单,对于路径的处理svg...

    Canvas知乎登录页面背景动画特效代码

    Canvas知乎登录页面背景动画是一款基于HTML5实现的动态线条背景登录页面特效。

    详解html5 canvas常用api总结(二)–绘图API

    lineTo(x1,y1):从当前位置(x0,y0)处到(x1,y1)画一条直线。 beginPath():开启一条路径或者重置当前路径。 closePath():从当前点回到路径起始点,也就是上一个beginPath的位置,回避和路径。 stroke():绘制。必须加...

    HTML5绘制3D线条延伸动画特效.zip

    HTML5绘制3D线条延伸动画特效是一款基于HTML5 Canvas绘制动画特效。

    HTML5在canvas中绘制复杂形状附效果截图

    一、绘制复杂形状或路径 ... lineTo() : 从当前点绘制一条直线到点(x,y)。 arc(x,y,r,sAngle,eAngle,counterclockwise) : 绘制一条指定半径的弧到点(x,y)。 二、用这些方法绘制复杂形状需遵循以下步骤 使用beginP

    html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形

    上一篇文章我讲了画矩形和圆形的方法,他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来,我们动用把面拆成线条的能力,很容易就能发现圆角矩形其实是由4条钩子般的曲线组成,感...

    使用HTML5的Canvas绘制曲线的简单方法

    Canvas2D自带的曲线方法 最近在研究3D柔体的计算,所以在狂补一些知识。经常会涉及到一些数值分析方面的...可以先拖出一条直线,然后点击某个位置让直线扭曲。一开始的拖动动作就是决定曲线的两个顶点,点击动作就是添

    WEB CAD中二次开发绘制任意线功能代码如何写?

    在 HTML 页面中,创建一个 Canvas 元素作为画布,设置其宽度和高度。在 JavaScript 代码中,获取 Canvas 对象,并调用其 getContext() 方法获取一个渲染上下文对象。 ARX在线CAD画图,在鼠标按下事件和移动事件中,...

    js绘制一条直线并旋转45度

    本文实例为大家分享了js绘制一条直线并旋转45度的具体代码,供大家参考,具体内容如下 绘制一条直线,并旋转45度 html 页面 &lt;canvas id=canvas width=300 height=300 xss=removed&gt;&lt;/canvas&gt; js页面 [removed] ...

    H5全屏渐变线条划过动画特效

    H5全屏渐变线条划过动画特效是一款基于HTML5 Canvas绘制的红色倾斜线条划过动画特效。

    Apress.Pro.WPF.in.C.Sharp.2008.2nd.Edition.Feb.2008

    4.5 使用Canvas面板进行 基于坐标的布局 89 4.5.1 Z顺序 90 4.5.2 lnkCanvas元素 91 4.6 布局示例 93 4.6.1 列设置 93 4.6.2 动态内容 94 4.6.3 组合式用户界面 96 4.7 结束语 97 第5章 内容 99 5.1 理解内容控件 ...

    delphi 开发经验技巧宝典源码

    0015 以原始风格显示控件的滚动条 11 0016 使用快捷键打开对象观察器中的“...”按钮 11 1.5 其他相关应用技巧 11 0017 安装合适的Delphi版本 11 0018 熟练掌握Delphi中的菜单项 12 0019 构成Delphi项目...

    delphi 开发经验技巧宝典源码06

    0015 以原始风格显示控件的滚动条 11 0016 使用快捷键打开对象观察器中的“...”按钮 11 1.5 其他相关应用技巧 11 0017 安装合适的Delphi版本 11 0018 熟练掌握Delphi中的菜单项 12 0019 构成Delphi项目...

Global site tag (gtag.js) - Google Analytics