<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. C++ Reflection

    http://www.vollmann.com/en/pubs/meta/meta/meta.html http://www.extreme.indiana.edu/reflcpp/ http://w ...

  2. UITableViewCell的separator分隔线设置失效

    // 处理separator -(void)viewDidLayoutSubviews { if ([self.tableView respondsToSelector:@selector(setSe ...

  3. CentOS安装oracle12C

    安装虚拟系统CentOS6.5,分配给至少1G的内存,其他条件适当高些,具体参考官方文档 一.安装数据库: 1.安装依赖软件包 yum install binutils -y yum install ...

  4. MySQL编译安装错误：No curses/termcap library found的解决方法

    CentOS编译安装MySQL,./coonfigure时出现错误: checking for termcap functions library... configure: error: No cu ...

  5. centos 7.0 安装vim

    用的最小化 安装 看看跟VI命令有何区别 后面会记录使用经验 [root@localhost conf]# yum -y install vim 已加载插件:fastestmirror base | ...

  6. Python开发【第四篇】：Python基础之函数

    三元运算 三元运算(三目运算),是对简单的条件语句的缩写. ? 1 2 3 4 5 # 书写格式   result = 值1 if 条件 else 值2   # 如果条件成立,那么将 “值1” 赋值给 ...

  7. Oracle nvl(),nvl2()函数介绍

    NVL函数 Oracle/PLSQL中的一个函数. 格式为: NVL( string1, replace_with) 功能:如果string1为NULL,则NVL函数返回replace_with的值, ...

  8. Java中符号位扩展

    第一个例子: byte b=-100;b在内存中是以补码的形式存贮的:1001 1100 如果执行char c=(char)b;如3楼企鹅先生所说:b要先变为int,这时增加的位全要用b的符号位填充( ...

  9. [IOC]Unity使用

    Unity是什么? unity是patterns&practices团队开发的一个轻量级.可扩展的依赖注入容器. Unity特性 1.它提供了创建(或者装配)对象实例的机制,而这些对象实例可能 ...

  10. vim基础命令

    2015-06-04 by komilevim基础命令 打开一个文件 vim index.php 几种模式说明Normal Mode也就是最一般的普通模式,默认进入vim之后,处于这种模式.Inser ...