html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
作者：佚名
字体：[ ] 来源：互联网 时间：04-14 16:32:40
HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
Canvas一般是指画布，最近对用html5写游戏比较感兴趣，所以简单的用了一下Canvas。
之前接触Canvas是在silverlight和wpf上用到过他，在silverlight上Canvas是一个绝对定位的容器，里面可以放任何控件。我们通过他可以构建画布、图形应用、GIS应用等。
在html5中，canvas是一个新增的标签：代码如下:&canvas&&/canvas&他有基本的html标签的所有属性，一样可以给他设置style。
代码如下:&canvas style="width:400height:300"&&/canvas&&style&canvas{width:400height:400background:#000;}&/style&
&canvas&&/canvas&他还有一个特定的attribute：代码如下:&canvas height="300" width="400"&&/canvas&这里的height、width与以往的html标签的attribute不同，也与style中的height、width不同，这里主要是指canvas中的坐标范围。而style里的width、height是指canvas实际展示的大小。
比如定义下面的一个canvas：代码如下:&canvas width="400" height="300" style="width:600height:450border:1px solid #000;"&&/canvas&然后在canvas中画一个坐标为& 100、50，大小为200、150的矩形，你会看到实际的效果如下图：
图中 canvas的大小是通过style决定的 600px * 450px，但是填满整个canvas的坐标只是400*300， 对应着括号里的大小。
在canvas中画图是基于坐标的，所以100, 50的坐标转化成了150px,75px的屏幕坐标，矩形的大小也由200*150转换成300px*225px的屏幕大小。
你可以按照下面的代码自己试一试：
代码如下:&!doctype html&&html&&/p&
&p&&body&&canvas width="400" height="300" style="width:600height:450border:1px solid #000;"&&/canvas&&script&var context =document.getElementsByTagName("canvas")[0].getContext("2d");context.fillRect(100,50,200,150);&/script&&/body&&/html&canvas的还有些其他attribute，还没有去看，他还有一个主要的方法，就是getContext()，这个方法就是获取画图的对象。
通过canvas的dom对象，可以调用getContext(&2d&)的方法获取对应的画图对象：
var canvas = document.getElementsByTagName(&canvas&)[0];var context = canvas.getContext(&2d&);在开发者控制台里可以看到这个drawing2d的属性及方法：
包含了fillStyle、stokeStyle、lineCap、font等画笔样式类的属性，fillRect、strokeRect、beginPath、moveTo、lineTo、closePath、stroke、fill、drawImage等画图动作的方法，还有一些其他的一些transfrom、save等方法。
简单说一下我看了的几个属性和方法，其他的需要自己去摸索哦：
fillStyle：填充样式，可以是颜色值的html码 如红色：#ff0000，其他是不是支持css3的更多属性就不知道了
strokeStyle：线条样式
font：字体样式
fillRect：function(x,y,width,height)，直接按fillStyle填满一个矩形
strokeRect：function(x,y,width,height)，直接按strokeStyle描一个矩形边
beginPath：开始画线，配合moveTo\lineTo\closePath等画折线或多边形
moveTo：function(x,y)将画线起点移动到新的坐标
lineTo:function(x,y)从当前点画的目标点
closePath：从当前点连接到起点
stroke：按照上面的路径按strokeStyle画折线
fill：按上面的路径按fillStyle画矩形
drawImage: function(image,x,y,width,height)将Image对象添加的画布上。注意这里的image对象必须是已经加载完毕的。如 var img = new Image();img.src=&test.png&;img.onload = function(){/*在这里才能将image添加到画布*/}
可以看下上面画矩形的方法：代码如下:context.fillRect(100,50,200,150);
画一条折线：代码如下:context.beginPath();context.moveTo(10,10);context.lineTo(10,110);context.lineTo(110,110);context.lineTo(110,10);context.closePath();context.stroke();
canvas具有绘图的功能，但是在用户交互上似乎比较乏力。拿silverlight的canvas、.NET的Bitmap、html的div与canvas对比了一下：
个人感觉canvas和Bitmap更像，是一个将Bitmap放到浏览器端的一个版本，当然我们可以通过他来实现更多的功能。canvas本身能实现的还是比较少，但是配合现有的其他浏览器端应用的技术肯定能创造出更多好的应用。
大家感兴趣的内容
12345678910
最近更新的内容8大核心要点：我们能用HTML5 Canvas做什么？
发表于 17:20|
作者杨依帆
摘要：HTML5的Canvas元素称得上HTML5的核心技术所在。而作为一个依靠JavaScript绘制华丽图像的元素，Canvas究竟能够运用在哪些方面的开发？国外开发者Ohad Eder-Pressman为我们给出了8个精彩的答案。
最近在国外问答网站Quora上，许多开发者对于HTML5 元素的实用性进行了一系列探讨。Canvas非常灵活，能够很好地融合JavaScript代码并在浏览器内绘制华丽的图形。Canvas究竟具体能做些什么？3D3R公司创始人兼CEO 的答案十分精彩，我们对其文字进行了翻译和整理，不妨一起来看一看。图：用Canvas绘制的图形什么是Canvas？Canvas元素是HTML5的一部分，允许脚本语言动态渲染位图像。Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的API，从而生成动态的图形。Ohad Eder-Pressman我们能用Canvas做些什么？1. 游戏：毫无疑问，游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧，Ohad认为运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥更大的潜力。2. 图表制作：图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作，但Ohad认为大家完全可以用Canvas来实现。当然，使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。3. banner广告：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。4. 模拟器：Ohad认为，无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。5. 远程计算机控制：Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。6. 字体设计：对于字体的自定义渲染将完全可以基于Web，使用HTML5技术进行实现。7. 图形编辑器：Ohad预测，图形编辑器将能够100%基于Web实现。8. 其他可嵌入网站的内容：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。Ohad呼吁大家继续挖掘Canvas的潜力，运用HTML5技术创造更多价值。（文/杨依帆 责编/张宁）
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章Selenium 2介绍(五) -- 测试设计考虑_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Selenium 2介绍(五) -- 测试设计考虑
上传于||文档简介
&&S​e​l​e​n​i​u​m​  ​的​测​试​设​计​考​虑
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
下载文档到电脑，查找使用更方便
还剩8页未读，继续阅读
你可能喜欢用Selenium工具录制之后，脚本框里Target是ID=canvas，如下图，重播完全没用用呀！求解_百度知道
用Selenium工具录制之后，脚本框里Target是ID=canvas，如下图，重播完全没用用呀！求解
/zhidao/wh%3D450%2C600/sign=b7be557e9dee5/80cb39dbb6fddaa1fa://h.hiphotos.baidu:///zhidao/pic/item/80cb39dbb6fddaa1fa.baidu.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink"><img class="ikqb_img" src="/zhidao/wh%3D600%2C800/sign=f9adadbb6fddaa1fa://h.jpg" esrc="http.hiphotos<a href="http
提问者采纳
selenium 2没有办法操作隐藏的元素，确定id=canvas是可见的？还是录制的时候选取的对象不准确？
确实是可见的。。但是我点什么，录出来都没有用。。。
建议采用楼上的方法二，在Target下拉列表中选择用其它属性定位，比如xpath，如果不行的话，可以根据html对应的结构编辑一下xpath多试几次
提问者评价
其他类似问题
为您推荐：
其他1条回答
拖到左上角的回放速度条重放后、录制的元素属性动态变化--解决方法、回放速度太快--解决方法，报没有找到元素；2，出现这种问题一般有两种原因，调整回放速度：1
我点Find也不会再页面里有任何变化，感觉像是根本找不到这个元素的感觉。。
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁怎么获取Canvas元素-c/c++-电脑编程网怎么获取Canvas元素作者：cfsjjjj　和相关&&
Canvas 中有很多类型的元素。但我只需要获取Canvas 中所有 （直线，圆，多边行 ...）等图形元素
该这么获取啊！ 谢谢！------回答---------------其他回答（25分）---------用到Linq的一些扩展方法，可以直接取它里面某类型控件的集合LayoutRoot.Children.OfType&Ellipse&();比如这样写就可以获取所有圆的集合
------其他回答（15分）---------路过，帮顶下------回答---------------其他回答（25分）---------
用到Linq的一些扩展方法，可以直接取它里面某类型控件的集合LayoutRoot.Children.OfType&Ellipse&();比如这样写就可以获取所有圆的集合
------其他回答（15分）---------路过，帮顶下相关资料：｜｜｜｜｜｜｜怎么获取Canvas元素来源网络，如有侵权请告知，即处理！编程Tags：　　　　　　　　　　　　　　　　&