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. [MFC] CString小用例

    在实际项目中需要对数字转成的字符串进行格式处理, 如: 50.500000,需要转化成50.5; 1.00000,需要转化成1, 对于编号而言要求都是4位,不足前面补0. 如1转成0001,222转成 ...

  2. Arduino学习笔记1---开发环境搭建

    主要内容:(一). Arduino IDE的下载及安装 (二). Arduino IDE的应用 (三). Arduino的程序结构 (四). Arduino程序的编译及下载 (一). Arduino ...

  3. 并发安全问题之HashMap

    原文地址: http://my.oschina.net/xianggao/blog/393990#OSC_h2_1 目录[-] 并发问题的症状 多线程put后可能导致get死循环 多线程put的时候可 ...

  4. 深入探究Java中hashCode()和equals()的关系

    目录 一.基础:hashCode() 和 equals() 简介 equals() hashCode() 二. 漫谈:初识 hashCode() 与 equals() 之间的关系 三. 解密:深入理解 ...

  5. express---express-session axios

    express---express-session axios 使用axios访问后台获取session中的属性值为undefined 在main.js中导入axios import axios fr ...

  6. java验证身份证号码是否有效源代码 wn25的头像 wn25 23 2015-01-04 20:09 6 基本信息 Java × 1 浏览

    原文:http://www.open-open.com/code/view/1420373343171 1.描述 用java语言判断身份证号码是否有效,地区码.出身年月.校验码等验证算法 2.源代码 ...

  7. 天下文章一大抄 mysql远程连接

    使用GRANT命令创建远程连接mysql授权用户特定用户mysql -u root -ppassword   注意:p后面没有空格直接密码.mysql>grant all privileges ...

  8. BZOJ 2809 APIO 2012 dispatching 平衡树启示式合并

    题目大意:给出一棵树,每个节点有两个值,各自是这个忍者的薪水和忍者的领导力.客户的惬意程度是这个点的领导力乘可以取得人数.前提是取的人的薪水总和不超过总的钱数. 思路:仅仅能在子树中操作.贪心的想,我 ...

  9. Classification and logistic regression

    logistic 回归 1.问题: 在上面讨论回归问题时.讨论的结果都是连续类型.但假设要求做分类呢?即讨论结果为离散型的值. 2.解答: 假设: 当中: g(z)的图形例如以下: 由此可知:当hθ( ...

  10. HDOJ 1217 Arbitrage(拟最短路，floyd算法)

    Arbitrage Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...