1. <html>
  2.     <head>
  3.         <title>canvas demo</title>
  4.     </head>
  5.     <body>
  6.         <canvas id="mycanvas" width="500px" height="500px" ></canvas>
  7.         <script type="text/javascript">
  8.             var mycanvas = document.getElementById("mycanvas");
  9.             var mycontext = mycanvas.getContext("2d"); 
  10.  
  11.             mycontext.beginPath();
  12.             mycontext.strokeStyle = "red";
  13.             mycontext.moveTo(70, 140);
  14.             mycontext.lineTo(140, 70);
  15.             mycontext.lineTo(300,200);
  16.             mycontext.lineWidth="5";
  17.             mycontext.stroke();
  18.  
  19.             mycontext.beginPath();
  20.             mycontext.strokeStyle = "blue";
  21.             mycontext.moveTo(200, 200);
  22.             mycontext.lineTo(400, 500);
  23.             mycontext.stroke();
  24.         </script>
  25.         <style>
  26.             #mycanvas{
  27.                 border: solid 1px;
  28.             }
  29.         </style>
  30.  
  31.     </body>
  32. </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. ecshop 后台-》广告

    1.后台广告宽度限制不能超过1024,高度大于1,admin/ad_position.php 第236行 || $ad_width < ) { make_json_error($_LANG['w ...

  2. dubbo 教程

    阿里巴巴dubbo主页:http://code.alibabatech.com/wiki/display/dubbo/Home-zh 1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提 ...

  3. Mysql利用mysql_multi配置一台主机多个实例（转）

    在Mysql官方帮助文档中,详细记录中Mysql的启动方式,有mysqld_safe.mysql.server.mysql_multi这三种.关于mysql_multi的介绍: Mysqld_mult ...

  4. js日期格式化函数

    /** * @author ocq * * 对Date的扩展,将 Date 转化为指定格式的String * 月(M).日(d).12小时(h).24小时(H).分(m).秒(s).周(E).季度(q ...

  5. 贴上自己写的代码-jq隐藏事件

  6. git SSH keys

    An SSH key allows you to establish a secure connection between your computer and GitLab. Before gene ...

  7. java web

    1,当访问完一个网页的时候,浏览器会有缓存,当你再次输入原来的网站是会有从远端传来的网页缓存,所以在测试的时候要清除缓存才行

  8. Java五道输出易错题解析（避免小错误）

    收集了几个易错的或好玩的Java输出题,分享给大家,以后在编程学习中稍微注意下就OK了. 1. 看不见的空格? 下面的输出会正常吗? package basic; public class Integ ...

  9. 工具介绍 - NimbleText

    非常实用的工具, 即使不是程序员也有必要掌握这个简单的小工具. 这个工具有桌面版和在线版两个版本. 桌面版地址: http://nimbletext.com/ 在线版地址: http://nimble ...

  10. 繁华模拟赛day8 牛栏

    /* 标称并没有用到题解中提到的那种奇妙的性质,我们可以证明,正常从1开始走的话,需要T次,如何使这个次数减小?题解中提到一个办法,有一步小于n/t,我们考虑这一步,如果把它匀到左右两步中,则可以减小 ...