<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. 使用 Elmah一些要注意的问题

    http://www.cnblogs.com/apsnet/archive/2012/04/28/2474730.html 1. Elmah使用后,在发布时,要区分IIS6和IIS7 ,IIS6下 H ...

  2. Spring MVC启动过程

    org.springframework.web.context.ContextLoaderListener ContextLoaderListener的作用就是启动Web容器时,自动装配Applica ...

  3. Redis3.0.7 cluster/集群 安装配置教程

    1.前言 环境:CentOS-6.7-i386-LiveDVD 安装的CentOs系统 节点: 6个节点,3个主节点.3个从节点(由于redis默认需要3个主节点,如果想每个主节点有一个从节点,这是最 ...

  4. 一款符合当前主流审美的Swing外观(Look and Feel)_测试版发布

    [前言] 本文将展示的是一款J2SE平台Swing外观(Look and Feel)实现,目前给出的演示jar包仅供测试之用,主体工作已经完成,余下是兼容性测试和调整,附件中的演示jar包推荐运行于j ...

  5. php去掉字符串的最后一个字符附substr()的用法

    转自:http://www.jb51.net/article/26604.htm 今天项目中用到,去掉字符串中的最后一个字符 原字符串1,2,3,4,5,6, 去掉最后一个字符"," ...

  6. smarty string_format用法 取小数点后2位

    <{if $d.ul_pv}> <{$d.sum/$d.ul_pv|string_format:'%.2f'}> <{else}> 0.00 <{/if}&g ...

  7. spring 缓存（spring自带Cache）（入门）

    spring的缓存机制,是方法纬度的缓存机制, 这就意味着我们并不用关注 底层是否使用了数据库以及通过什么方式访问的数据库: 因此,此缓存方法既适用于dao层,也适用于service层. spring ...

  8. Nginx安装配置（转）

    Nginx 安装配置 Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP3/ ...

  9. findByExample(Object exampleEntity)方法得到的List判断是否为空，不可用(lis != null)

    用findByExample(Object exampleEntity)方法可以应用在用户登录上面,获得有登陆名和密码的user对象进行查询. 返回两者都符合的对象列表,为空则登陆失败. 错误的方法: ...

  10. Back to Edit Distance（LCS +　ＬＩＳ）

    Given 2 permutations of integers from 1 to N, you need to find the minimum number of operations nece ...