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. request response session的常用方法

    .request对象 客户端的请求信息被封装在request对象中,通过它才能了解到客户的需求,然后做出响应.它是HttpServletRequest类的实例. 序号 方 法 说 明 1 object ...

  2. java system.out.printf()的使用方法

    package test; public class Main { public static void main(String[] args) { // 定义一些变量,用来格式化输出. double ...

  3. spring和mybatis整合配置文件

    查看所有springmvc  spring  mybatis配置文件见下链接: https://my.oschina.net/sherwayne/blog/262616 <?xml versio ...

  4. 负环 BZOJ 4773

    负环 [问题描述] 在忘记考虑负环之后,黎瑟的算法又出错了.对于边带权的有向图 G = (V, E),请找出一个点数最小的环,使得环上的边权和为负数.保证图中不包含重边和自环. [输入格式] 第1两个 ...

  5. BZOJ 4034 [HAOI2015]树上操作（树链剖分）

    题目链接  BZOJ4034 这道题树链剖分其实就可以了. 单点更新没问题. 相当于更新 [f[x], f[x]]这个区间. f[x]表示树链剖分之后每个点的新的标号. 区间更新的话类似DFS序,求出 ...

  6. Ubuntu官方Wiki教程资源

    前言:通常学习一样新知识时,最快的方式是通过搜索引擎然后以最快的方式拿枪上战场,如果接下来还一直依赖搜索引擎去打,那么你会发现自己永远都在打游击:那么如果要解决这个问题,必须要学会系统的学习,只有连贯 ...

  7. SQL存储过程实例详解

    本文用3个题目,从建立数据库到创建存储过程,详细讲解数据库的功能. 题目1         学校图书馆借书信息管理系统建立三个表:         学生信息表:student 字段名称 数据类型 说明 ...

  8. 转：linux下共享库的注意点之-fpic

    转: http://www.cnblogs.com/leo0000/p/5691483.html linux下共享库的注意点之-fpic 在编译共享库必须加上-fpic.这是为什么呢? 首先看一个简单 ...

  9. Solidworks如何绘制装饰螺纹线

    1 插入-注解,装饰螺纹线   2 绘制装饰螺纹线,选择螺纹的边线,标准选择ISO,下面可以选择的范围就确定了(M6的孔,只能选择M8的螺纹或者M10的螺纹),画好之后在3D图中并没有明确的螺纹样式 ...

  10. 自己定义控件事实上非常easy1/6

    尊重原创转载请注明:From AigeStudio(http://blog.csdn.net/aigestudio)Power by Aige 侵权必究! 炮兵镇楼 上一节我们粗略地讲了下怎样去实现我 ...