以下样例为用canvas标签画多条直线

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>index_three</title>

<link href="css/style.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="js/index.js"/></script>

<body >

<!-- 加入canvas标签，并加上红色边框以便于在页面上查看 -->

<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">

您的浏览器不支持canvas标签。

</canvas>

<script type="text/javascript">

//获取Canvas对象(画布)

var canvas = document.getElementById("myCanvas");

//简单地检測当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误

if(canvas.getContext){

    //获取相应的CanvasRenderingContext2D对象(画笔)

    var ctx = canvas.getContext("2d");

	//线条的颜色

	ctx.strokeStyle="#FF9933";

	//线条的宽度像素

	ctx.lineWidth=10;

	//线条的两关形状

	ctx.lineCap="round";

    //注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。

    //開始一个新的绘制路径

    ctx.beginPath();

    //定义直线的起点坐标为(10,10)

    ctx.moveTo(50, 50);

    //定义直线的终点坐标为(50,10)

    ctx.lineTo(350, 250);

	ctx.moveTo(50, 240);

	ctx.lineTo(360, 60);

	ctx.moveTo(50, 200);

	ctx.lineTo(300, 40);

    //沿着坐标点顺序的路径绘制直线

    ctx.stroke();

    //关闭当前的绘制路径

    ctx.closePath();

}

</script>

</body>

</html>

Html5新特性 &lt;canvas&gt;画板画直线的更多相关文章

  1. HTML5新特性之Canvas+drag(拖拽图像实现图像反转)

    1.什么是canvas 在网页上使用canvas元素时,会创建一块矩形区域,默认矩形区域宽度300px,高度150px.. 页面中加入canvas元素后,可以通过javascript自由控制.可以在其 ...

  2. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  3. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  4. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  5. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  6. 第二季第八天 HTML5新特性

    在函数内部window.a =  a  在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...

  7. 前端进阶系列(三):HTML5新特性

    HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...

  8. HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

    一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...

  9. HTML5新特性-- -定时器

    一.定时器:一次性定时器/周期性定时器 #requestAnimationFrame 智能定时器 #此定时器主要使用范围:动画和游戏中 特点: setTimeout(fn,500); setInter ...

随机推荐

  1. DataTable去重复方法

    //去掉重复行 DataTable table=new DataTable(); DataView dv = table.DefaultView; table = dv.ToTable(true, n ...

  2. mysql set names.

    SET NAMES utf8 相当于 SET character_set_client = utf8 --用来设置客户端送给MySQL服务器的数据的 字符集 SET character_set_res ...

  3. loop_login.sh

    [oracle@ora10g scripts]$ cat loop_login.sh #/bin/bash####################export ORACLE_BASE=/u01/app ...

  4. 【转】iOS开发系列--数据存取

    原文: http://www.cnblogs.com/kenshincui/p/4077833.html#SQLite 概览 在iOS开发中数据存储的方式可以归纳为两类:一类是存储为文件,另一类是存储 ...

  5. Android热更新开源项目Tinker集成实践总结

    前言 最近项目集成了Tinker,开始认为集成会比较简单,但是在实际操作的过程中还是遇到了一些问题,本文就会介绍在集成过程大家基本会遇到的主要问题. 考虑一:后台的选取 目前后台功能可以通过三种方式实 ...

  6. 1.Weblogic通Eclipse调试配置（Weblogic同Eclipse调试配置技术）

    概述:环境是eclipse,maven,svn, 在实际的的应用项目中,我们经常遇到本地应用程序没有问题,而部署到Weblogic上缺出现问题,查看日志并找不到原因,这时就需要调试部署上的程序与本地e ...

  7. 最短路径算法——Dijkstra,Bellman-Ford,Floyd-Warshall,Johnson

    根据DSqiu的blog整理出来 :http://dsqiu.iteye.com/blog/1689163 PS:模板是自己写的,如有错误欢迎指出~ 本文内容框架: §1 Dijkstra算法 §2 ...

  8. POJ 2438 （哈密顿回路）

    分析: 2*n个小朋友,每个最多有n-1个"敌人",显然是存在哈密顿回路的. 预处理边,然后找哈密顿回路. code #include <iostream> #incl ...

  9. 【cogs247】售票系统

    [问题描述] 某次列车途经C个城市,城市编号依次为1到C,列车上共有S个座位,铁路局规定售出的车票只能是坐票, 即车上所有的旅客都有座.售票系统是由计算机执行的,每一个售票申请包含三个参数,分别用O. ...

  10. When Colon Scripting is comming

    当冒号脚本来临-- 前一篇<JSON带来编程界怎样的描述>,已经展开了一种脚本设计概念,以此诞生的脚本语言待定义的语法不多.但总归需要经历各种语言描述能力对比来归纳最终友好特性的. 冒号已 ...