1、canvas画直线

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

    </head>

    <style type="text/css">

        canvas{border:dashed 2px #CCC}

    </style>

    <script type="text/javascript">

        function $$(id){

            return document.getElementById(id);

        }

        function pageLoad(){

            var can = $$('can');

            var cans = can.getContext('2d');//2d的效果

            cans.moveTo(20,30);//第一个起点

            cans.lineTo(120,90);//第二个点

            cans.lineTo(220,60);//第三个点（以第二个点为起点）

            cans.lineWidth=3;

            cans.strokeStyle = 'red';

            cans.stroke();

        }

    </script>

    <body onload="pageLoad();">

        <canvas id="can" width="400px" height="300px">4</canvas>

    </body>

</html>

　　

学习html5 中的canvas（一）的更多相关文章

  1. HTML5中的canvas基本概念及绘图

    * Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...

  2. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  3. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  4. HTML5中的Canvas详解

    什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...

  5. 学习——HTML5中事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  6. HTML5中的 Canvas

    什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...

  7. HTML5中的Canvas和SVG

    Canvas 和 SVG 都允许我们在浏览器中创建图形,但是它们在根本上是不同的. 1 SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中 ...

  8. HTML5 中的 canvas 画布（二）

    绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image();  // 先创建图片对象 image.src = '图片的 ...

  9. 关于学习HTML5中自己犯的错误

    7.1写错了 siblings()这个函数写成了sibling,在jQuery中并没有这个函数的定义 在查找错误的过程中,自己也发现了一个学习jQuery的网站http://www.365mini.c ...

随机推荐

  1. Codeforces961F. k-substrings

    $n \leq 1000000$的字符串,对每一个子串$i$~$n-i+1$,求他最长的一个既是前缀又是后缀的子串. 这题要求的东西具有“对称性”,不充分利用难以解决.这里的“对称性”不仅指询问是对称 ...

  2. csv文件导出

    参考博客:http://www.cnblogs.com/mingforyou/p/4103132.html 导入jar包javacsv.jar 链接:http://pan.baidu.com/s/1i ...

  3. elasticsearch入门使用（五） kibana&x-pack安装使用

    Kibana User Guide 一.UI安装 https://www.elastic.co/downloads/kibana 下载rpm直接运行即可 二.参数配置 find / -name kib ...

  4. Python练习题–持续更新

    1.你是一个高级测试工程师,现在要做性能测试,需要你写一个函数,批量生成一些注册使用的账号. 产生的账号是以@163.com结尾,长度由用户输入,产生多少条也由用户输入,用户名不能重复,用户名必须由大 ...

  5. c++ 高效并发编程

    高效并发编程 并发编程的基本模型包括,通过消息机制来管理运行顺序的message passing, 通过互斥保护共享的shared memory. 线程同步的基本原则 最低限度共享变量,考虑使用imm ...

  6. ZOJ - 4019 Schrödinger's Knapsack (背包，贪心，动态规划)

    [传送门]http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5747 [题目大意]:薛定谔的背包.薛定谔的猫是只有观测了才知道猫的死 ...

  7. 关于傅里叶变换NTT(FNT）的周边

    NTT:快速数论变化,对于FFT精度减少的情况,NTT可以避免但是会慢一点,毕竟是数论有Mod,和快速米 引用:http://blog.csdn.net/zz_1215/article/details ...

  8. C# 打印日志

    原理其实很简单,就是创建文件夹.创建文件.写入内容 首先判断文件夹.文件是否存在 然后再创建或者追加 不多介绍,直接上代码 public static void BuildLogFile(string ...

  9. Oracle版本–EBS R12.1.1

    select * from v$version; Oracle Database 11g Enterprise Edition Release 11.1.0.7.0 - 64bit Productio ...

  10. hadoop优质链接

    http://wiki.apache.org/hadoop/FAQ