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. 【2018.10.18】CXM笔记（动态规划）

    1.给你一棵树,让你修任意多条点不相交的铁路(每条铁路都是一根链),定义一个点的代价为它到根节点的路径中不在铁路上的边数,求一种设计方案代价最大的点最小. 铁路点不相交与 每个点连出去的铁路条数 $\ ...

  2. 【Codeforces Round #502 (Div. 1 + Div. 2) 】

    A:https://www.cnblogs.com/myx12345/p/9843032.html B:https://www.cnblogs.com/myx12345/p/9843050.html ...

  3. excel打乱各行的顺序，实现无序随机排列

    由于公司做活动,经常会发些激活码过来,为了让激活码能够充分使用,经常要打乱激活码的顺序,百度了下,看了下网上的介绍,还不错,挺实用,记录下来. 具体方法如下: 1.将文本里的内容复制到Excel里的任 ...

  4. Codeforces Round #288 (Div. 2) E. Arthur and Brackets [dp 贪心]

    E. Arthur and Brackets time limit per test 2 seconds memory limit per test 128 megabytes input stand ...

  5. ［转发］Android 系统稳定性 - ANR（三）

    文章都为原创,转载请注明出处,未经允许而盗用者追究法律责任. 很久之前写的了,留着有点浪费,共享之. 编写者:李文栋 http://rayleeya.iteye.com/blog/1956056 1. ...

  6. shell按日期自动切割nginx日志脚本

    shell按日期自动切割nginx日志脚本 参考:自学it网 http://www.zixue.it/. #nginx日志切割脚本 #author:ce #!/bin/bash #设置日志文件存放目录 ...

  7. golang-uuid

    uuid第三方库可以在github上找,我在这使用的是:github.com/satori/go.uuid PS:不知道哪里原因,使用go mod 管理包,下载的包和github上的不是完全一样,也特 ...

  8. ueditor整合之后前段不显示高亮

    自己整合ueditor插件后,发现在前段显示的时候并没有高亮处理 在网上看了一些方法后,自己尝试了下. 1.在页面上引入相关的js和css文件 主要是以下两个文件 <script src=&qu ...

  9. HDC与CDC相互转换

    转自loop_k原文 HDC与CDC相互转换 概念 首先说一下什么是DC(设备描述表):Windows应用程序通过为指定设备(屏幕,打印机等)创建一个设备描述表(Device Context, DC) ...

  10. [CSS3] Understand CSS Selector Specificity

    It is hard to explain css selector specificty, to easy way to understand it is by playing around wit ...