<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. IOS: 账号，证书 好文整理

    公钥.私钥.数字证书的概念 http://blog.csdn.net/turui/article/details/2048582 iOS Provisioning Profile(Certificat ...

  2. ServiceBase 备份

    using CanDoo.Contracts; using CanDoo.Core.Data; using System; using System.Collections.Generic; usin ...

  3. AspNet Identity and IoC Container Registration

    https://github.com/trailmax/IoCIdentitySample TL;DR: Registration code for Autofac, for SimpleInject ...

  4. 使用maven编译Java项目 http://www.tuicool.com/articles/YfIfIrq

    使用maven编译Java项目 时间 2014-07-17 17:42:37  Way Lau's Blog 原文  http://www.waylau.com/build-java-project- ...

  5. MySQL主从数据库同步延迟问题解决（转）

    最近在做MySQL主从数据库同步测试,发现了一些问题,其中主从同步延迟问题是其中之一,下面内容是从网上找到的一些讲解,记录下来以便自己学习: MySQL的主从同步是一个很成熟的架构,优点为:①在从服务 ...

  6. MEAN组合框架搭建教程

    1,我们先走在官方github里面下载个包文件: git clone https://github.com/linnovate/mean.git  (是慢了点) 2,我把这个文件解压后文件名叫mean ...

  7. Hadoop！ | 大数据百科 | 数据观 | 中国大数据产业观察_大数据门户

        你正在使用过时的浏览器,Amaze UI 暂不支持. 请 升级浏览器 以获得更好的体验! 深度好文丨读完此文,就知道Hadoop了! 来源:BiThink 时间:2016-04-12 15:1 ...

  8. OC第一节 —— 类和对象

    一.类和对象的概念 1.1类 自己的定义: 具有相同或相似性质对象的抽象. 1.2 对象 自己的定义: 对象是人们要进行研究的任何物体,从最简单的整数到复杂的飞机 等均可以看做是对象. 举例说明: 类 ...

  9. CF #305(Div.2) D. Mike and Feet(数学推导）

    D. Mike and Feet time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  10. STAR-H1208M集线器不支持同时挂载多个nfs

    今天在两个触摸屏上都加入了开机加载nfs的操作. 没想到会出现以下错误: pmap_getmaps.c: rpc problem: RPC: Unable to receive; errno = Co ...