<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. ecshop网站搬家缓存无法更新

    问题描述: 1.后台产品列表能改,数据也能看到,前端就是不显示 2.缓存无法删除 3.网上其他方法都试过,还是不行 症状:是因为缓存无法删除,无法更新,只需要能重新更新缓存文件即可.网站搬家丢失tem ...

  2. 百度编辑器修改，不让它自动替换html标签

    在ueditor.all.js中找到 UE.plugins['defaultfilter'] = function () 注释或删掉这块代码. 注:ueditor.all.min.js 中也一样,格式 ...

  3. jquery 匿名函数的区别

    下面两个定义函数的方法是等价的 var test = function(val){alert(val);} function test(val){alert(val);} 都是定义了一个test()方 ...

  4. 解决windows系统80端口被占用问题（转）

    在windows下部署web应用(80端口),启动时提示bind 80端口失败 检查端口占用: netstat -ano | findstr 0.0.0.0:80 发现System进程 (pid=4) ...

  5. mysql 用sql 语句去掉某个字段重复值数据的方法

    示例代码如下: create table tmp as select min(主键) as col1 from 去重表名 GROUP BY 去重字段; delete from 去重表名 where 主 ...

  6. setTimeout和setInterval的各自使用场景

    默认的 setTimeout 只执行一次, 清除用clearTimeout setInterval 每间隔指定的时间, 就执行一次, 清除用clearInterval 但是, setTimeout也可 ...

  7. NERD_commenter——VIM批量注释与反注释插件

    转自:http://www.xefan.com/archives/83568.html 这是对程序员非常实用的一款插件,支持多种语言的补全,还支持单行注释,批量注释,等各种命令映射. 使用方法,先下载 ...

  8. Java通过JNI调用C

    Java调用C有多种方式,本文介绍笔者最近的学习过程,避免今后再犯类似的错误. 首先,Java肯定是调用C的动态链接库,即通过编译器编译后的dll/so文件. 下面介绍gcc编译dll的方法. 一般情 ...

  9. CF456C Boredom （DP）

    Boredom CF#260 div2 C. Boredom Codeforces Round #260 C. Boredom time limit per test 1 second memory ...

  10. 字符编码-UNICODE,GBK,UTF-8区别【转转】

    字符编码介绍及不同编码区别 今天看到这篇关于字符编码的文章,抑制不住喜悦(总结的好详细)所以转到这里来.转自:祥龙之子http://www.cnblogs.com/cy163/archive/2007 ...