<html>

    <head>

        <title>canvas demo</title>

    </head>

    <body>

        <canvas id="mycanvas" width="500px" height="500px" ></canvas>

        <script type="text/javascript">

            var mycanvas = document.getElementById("mycanvas");

            var mycontext = mycanvas.getContext("2d"); 

            mycontext.beginPath();

            mycontext.strokeStyle = "red";

            mycontext.moveTo(70, 140);

            mycontext.lineTo(140, 70);

            mycontext.lineTo(300,200);

            mycontext.lineWidth="5";

            mycontext.stroke();

            mycontext.beginPath();

            mycontext.strokeStyle = "blue";

            mycontext.moveTo(200, 200);

            mycontext.lineTo(400, 500);

            mycontext.stroke();

        </script>

        <style>

            #mycanvas{

                border: solid 1px;

            }

        </style>

    </body>

</html>

效果图

beginPath()

刷新（开始）画图的开头

moveTo()

开始点

lineto()

记录点，可以多个

stroke()

绘制从beginPath()开始设置的定义图形

html5——canvas画直线的更多相关文章

  1. HTML5 Canvas 画虚线组件

    前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...

  2. HTML5 Canvas 画钟表

    画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...

  3. CSS3进度条 和 HTML5 Canvas画圆环

    看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...

  4. html5 canvas画饼

    1. [图片] lxdpie.jpg ​2. [文件] lqdpie.html ~ 801B     下载(7) <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...

  5. html5 canvas画不出图像的原因

    很久没写博客了,今年过年的时候,家里出了意外,现在心里依然很难受.6月份之前一直忙着写毕业论文,答辩完6月初回公司继续上班,今天刚好周末有空,就写下之前碰到一个问题. 做一个图像查看器(基于Chrom ...

  6. html5 canvas画流程图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. HTML5 Canvas画数字时钟

    先不说废话,没代码算个蛋. 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是时针,分针的逻辑都是一致的. 代码中有些坐标不知道为什么较不准,看看就好

  8. html5 canvas画进度条

    这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...

  9. html5 canvas 画hello ketty

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

随机推荐

  1. securecrt中文乱码

    1.直接打开Linux的terminal中文字符显示正常,但是用securecrt登陆后中文显示不正常 解决方法:securecrt字符集设置不对 路径:Options -> Session O ...

  2. Http常用状态码

    HTTP状态码(HTTP Status Code) 一些常见的状态码为: 200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - 服务不可用 所有状态解释:点击查看 1xx(临时响应 ...

  3. Mac终端Terminal调用Sublime Text

    Sublime Text 本身提供了命令行工具, 只需要在 Terminal 中输入以下内容就行了 sudo ln -s /Applications/Sublime\ Text.app/Content ...

  4. MYSQL调优

    4核8G内存配置文件 explain SQL 查看SQL索引使用情况. my.cnf skip-external-locking skip-name-resolve back_log= key_buf ...

  5. 将excel文件中的数据导入到mysql

    ·在你的表格中增加一列,利用excel的公式自动生成sql语句,具体方法如下:          1)增加一列(假设是D列)          2)在第一行的D列,就是D1中输入公式:=CONCATE ...

  6. （转载）MySQL数据类型：TINYINT, SMALLINT, MEDIUMINT, INT, INTEGER等字段类型区别

    (转自http://3y.uu456.com/bp-f088f739376baf1ffc4fad40-1.html) MySQL支持大量的列类型,它可以被分为3类:数字类型.日期和时间类型.字符串(字 ...

  7. 【9-20】vimtutor学习笔记

    第一节 ghjk移动光标 :q!:强制退出vim x:删除光标处的字符 i:在光标处插入 A:附加文本 :wq:保存文档并退出 第二节 dw:删除一个单词 d$:删除至行尾 de:删除光标处到该单词结 ...

  8. Scala 中object和class的区别

    Scala中没有静态类型,但是有有“伴侣对象”,起到类似的作用. Scala中类对象中不可有静态变量和静态方法,但是提供了“伴侣对象”的功能:在和类的同一个文件中定义同名的Object对象:(须在同一 ...

  9. php基础语法-函数等

    php是弱类型语言, 但并不是 无类型 语言! 同样有变量类型, ====================================================== 形容词(短语)修饰名词的 ...

  10. JavaScript 学习笔记 -- String.trim + format

    最近仍在IE6徘徊,低版本的浏览器没有实现JavaScript 的trim() 和 format(). . 主要是这两个使用的比较多,先整理出来: 1.trim() -- 去除字符串中开始和结尾部分, ...