Html5新特性 <canvas>画板画直线
以下样例为用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新特性 <canvas>画板画直线的更多相关文章
- HTML5新特性之Canvas+drag(拖拽图像实现图像反转)
1.什么是canvas 在网页上使用canvas元素时,会创建一块矩形区域,默认矩形区域宽度300px,高度150px.. 页面中加入canvas元素后,可以通过javascript自由控制.可以在其 ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- 第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...
- 前端进阶系列(三):HTML5新特性
HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...
- HTML5新特性--svg-echarts(重点)-拖动API-WebWorker
一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...
- HTML5新特性-- -定时器
一.定时器:一次性定时器/周期性定时器 #requestAnimationFrame 智能定时器 #此定时器主要使用范围:动画和游戏中 特点: setTimeout(fn,500); setInter ...
随机推荐
- My.Ioc 代码示例——Lifetime 和 ILifetimeScope
很多 Ioc 框架在创建对象的过程中,都会采取某种方式来缓存/复用/释放已构建的对象.在 My.Ioc 中,这个目的是通过 Lifetime/ILifetimeScope 来实现的.其中,Lifeti ...
- ASP.NET的WebConfig
转:http://blog.csdn.net/q3498233/article/details/8137364 WebConfig 花了点时间整理了一下ASP.NET Web.config配置文件的基 ...
- XlFileFormat
-----转载:http://hi.baidu.com/liu_haitao/item/900ddb38979188c22f8ec26e 18 XlFileFormat.xlAddIn Microso ...
- （转）php5中类的学习
类的结构: 类的内部能可能有三种东西,就是常量(constant),属性(property)和方法(method),功能可以理解成类外部的常量,变量和函数. 复制代码代码如下: <?ph ...
- linux下系统定时任务配置----crontab（mysql定时备份）
crontab命令用于设置周期性被执行的指令,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,crond进程每分钟会定期检查是否有要执行的任 ...
- Asp.net 事务处理
事务处理是在数据处理时经常遇到的问题,经常用到的方法有以下三种总结整理如下:方法1:直接写入到sql 中在存储过程中使用 BEGIN TRANS, COMMIT TRANS, ROLLBACK TRA ...
- 统计机器翻译(SMT)步骤总结
本文是在Niutrans论坛中的系列教程中总结出来的. 1.语料预处理 预处理的结果是生成双语分词之后的文件,该步需要注意的是对规则短语,比如数字.日期.网址等,进行泛化处理.可以用正则方法或者其它方 ...
- iOS面试题整理(一)
代码规范 这是一个重点考察项,曾经在微博上发过一个风格纠错题: 也曾在面试时让人当场改过,槽点不少,能够有 10 处以上修改的就基本达到标准了(处女座的人在这方面表现都很优秀 一个区分度很大的面试题 ...
- ajax页面数据的传递
在上一篇文章中,简单提到了ajax的工作流程,那么在这里我们就得实战一回了,真正将ajax的用途展现出来,这一整套流程就是在页面上触发一个ajax事件,然后发送请求,紧接着到数据库读取数据,返回值,然 ...
- 【转】POJ题目分类
初级:基本算法:枚举:1753 2965贪心:1328 2109 2586构造:3295模拟:1068 2632 1573 2993 2996 图:最短路径:1860 3259 1062 2253 1 ...