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. BZOJ4726: [POI2017]Sabota?

    $n \leq 500000$的树,开始有一个点是坏的,如果一个子树中坏点比例(不包括根节点)超过x那这整棵子树就会变坏,问最坏情况下不超过$K$个坏点的情况下$x$最小是多少. 被坑成傻逼.. 可以 ...

  2. Android 获取屏幕事件的坐标

    通常情况下我们只能获取当前Activity的画面坐标,那有时候我们需要做到一种类似于c++ hook的后台运行程序能够监听到前台用户的操作并记录下来,往往这类程序都是为自动化测试服务的. Androi ...

  3. 有关 GCC 及 JNA 涉及动态库/共享库时处理库文件名的问题

    动态库尤其是共享库在 Linux 环境下普遍存在库文件名包含版本号的情况,比如 Linux 环境下经常会发现一个共享库的真实文件名是 libfoo.so.1.1.0,而同时会有多个指向该真实库文件的软 ...

  4. T1164 统计数字 codevs

    http://codevs.cn/problem/1164/ 题目描述 Description [问题描述]某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*109).已知不 ...

  5. Codechef Yet another cute girl

    题意大概就是让你求一下[L,R]中的约数个数是素数的数的个数. 其中1<=L<=R<=1e12,R-L<=1e6. 然后我写了两种做法,第一种是可以直接搞出来L-R的约数个数, ...

  6. Chrome常用URL命令（伪URL）

    在Chrome地址栏输入chrome://chrome-urls/可以看到所有的Chrome支持的伪RUL 1.chrome://accessibility/ 可达性分析,默认是关闭的,点击acces ...

  7. Hbase调用JavaAPI实现批量导入操作

    将手机上网日志文件批量导入到Hbase中.操作步骤: 1.将日志文件(请下载附件)上传到HDFS中,利用hadoop的操作命令上传:hadoop  fs -put input  / 2.创建Hbase ...

  8. Solidworks如何制作动画2

    切换到Motion Study,然后定位到任意一帧,然后就可以摆弄当前装配体到新的位置和姿态,然后此时的时间和姿态就被记录下来了.以此类推可以多做几帧. 动画做好之后,点击播放可以预览.如果要保存,先 ...

  9. RecyclerView的万能切割线

    效果图: 用法: 加入默认切割线:高度为2px.颜色为灰色 mRecyclerView.addItemDecoration(new RecycleViewDivider(mContext, Linea ...

  10. vue - 前置工作 - 目录功能介绍

    一个DEMOS的完整目录(由于GWF问题,我就不一一打开网站一个个去搜索并且解释了)可以去关注:https://www.cnblogs.com/ye-hcj build build.js(本文来自ht ...