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. 转载： GMM-HMM学习笔记

    转载地址:http://blog.csdn.net/davidie/article/details/46929269 最近几天钻研了语音处理中的GMM-HMM模型,阅读了一些技术博客和学术论文,总算是 ...

  2. C 语言中的 feof（）函数

    功能: feof 是 C 语言标准库函数函数,其原型在 stdio.h 中,其功能是检测流上的文件结束符,如果文件结束,则返回非0值,否则返回0,文件结束符只能被 clearerr() 清除. 用法: ...

  3. R语言入门-画图（二）--heatmap

    一.函数参数: pheatmap参数: treeheight_row #横有多长 treeheight_col #竖有多长 cluster_cols=FLASE #单一方向聚类,也就是只有一边有树状结 ...

  4. DOM对象之查找标签&属性操作

    HTML DOM (文档对象模型) DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法. JavaScript对DOM进行了实现,对应于JavaScript中 ...

  5. 使用 Git + Dropbox + SourceTree 做 Source Code Management

    此篇文章主要針對有安裝 XCode 的 Mac 用戶. Git 版本控管工具,作用類似 CVS.Subversion(簡 稱SVN),好處在於 Git 不像 CVS 及 SVN 是屬於集中式的版本控管 ...

  6. Android:BLE智能硬件开发详解

    目录 前言 BLE是个什么鬼 BLE中的角色分工 主要的关键词和概念 GATT(Generic Attribute Profile ) Characteristic Service Android如何 ...

  7. discuz搬家

    1.需要重命名forumdata下面的cache和templates文件夹 2.如果数据库账户名和密码有改动过,需要修改config.inc.php 3.保证uc_server的链接正确!

  8. LSA、LDA

     Latent semantic analysis (LSA) is a technique in natural language processing, in particular distrib ...

  9. 忘掉VNC/RDP，拿起手中的MobaXterm轻松上手远程桌面

    前言 原创文章,转载引用务必注明链接. 这期属于番外篇,随便写写.吐槽一下自己,关于"减少eMMC擦写,延长NAND寿命提升性能"的坑还没填完,都不好愉快地写点轻松的小项目灌水了. ...

  10. C#获取电脑的相关信息

    /* 创建者:菜刀居士的博客  * 创建日期: 2014年08月31号  * 功能:获取电脑的相关信息  *  */ namespace Net.String.ConsoleApplication { ...