<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. MagicalRecord简单使用小记

    一般采用pod安装,导入框架 #import <CoreData+MagicalRecord.h> - (BOOL)application:(UIApplication *)applica ...

  2. CSS3 让图片镜像对称

    1.HTML代码 <!DOCTYPE html> <html> <head> <title>test</title> </head&g ...

  3. JavaWeb学习总结(一)——JavaWeb开发入门

    http://www.cnblogs.com/xdp-gacl/p/3729033.html 只为成功找方法,不为失败找借口! JavaWeb学习总结(一)--JavaWeb开发入门 一.基本概念 1 ...

  4. ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  5. span设为inline-block之后，未包含文字时下面会多出一条空白问题

    1.问题的引出: 产品列表页面场景: 上面是产品图片[img], 中间是提示库存信息[span](始终存在,有库存则不显示文字,但元素占位.所以设置display:inline-block), 下面是 ...

  6. Centos安装Kafka集群

    kafka是LinkedIn开发并开源的一个分布式MQ系统,现在是Apache的一个孵化项目.在它的主页描述kafka为一个高吞吐量的分布式(能 将消息分散到不同的节点上)MQ.在这片博文中,作者简单 ...

  7. windows下vmware10.0 安装centos7

    centos7.0-1506, 1511, 是指2015年, 06月份, 11月份. 这是rhel ubuntu发布新版本的时间. centos7.0 只提供了64位的系统下载: x86_64: we ...

  8. 结果集（result set)解释与用法

    解释: 引用自wiki: An SQL result set is a set of rows from a database, as well as metadata about the query ...

  9. 在windows7 上安装 Sublime Text 3 及其插件

    1.下载地址:http://www.sublimetext.com/3 请根据你的平台,选择适当的安装版本 安装完毕后,设定TAB键为4个空格( Preferences——>Setings-Us ...

  10. [译]在Mac上运行ASP.NET 5

    原文:http://stephenwalther.com/archive/2015/02/03/asp-net-5-and-angularjs-part-7-running-on-a-mac 这篇文章 ...