HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛。简单地说，canvas元素能够在网页中创建一块矩形区域，这块矩形区域可以成为画布，这其中可以绘制各种图形。可别小看了这个画布，它能实现无限的可能性。接下来我们从最简单的部分开始，逐步认识Canvas的强大功能。
1.在页面中添加canvas元素：
默认情况下，Canvas所创建的矩形区域大小为宽300像素，高150像素，不过我们可以使用width和height属性来自定义画布的宽度和高度。
像素概念：从定义上来看，像素是指基本原色素及其灰度的基本编码。像素是构成数码影像的基本单元，通常以像素每英寸PPI（pixels per inch）为单位来表示影像分辨率的大小。
例如：一张JPG图片 其PPI(pixel per inch) 像素 =300 知道图片尺寸可以算出共多少像素
ppi=300 就意味着每英寸有300个像素 长为5cm 1inch约=2.54cm 故5cm=（1/2.54）*5 inch 宽为3.8cm 3.8cm=3.8/2.54 inch 这张相片就是约590.55*448.82像素
Ex：构造一个宽200像素，高100像素的画布，并设置实心的边框：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我是标题</title>
</head> <body>
<canvas id="myCanvas" style="border:1px solid;"width="200" height="100"></canvas>
</body>
</html>
2.Canvas如何绘制图形：
1.在HTML5页面中添加canvas元素，必须定义canvas元素的id属性以便我们以后的调用。
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>//这里设置canvas 的id为myCanvas
2.在JavaScript代码中使用document.getElementById方法来寻找我们的canvas。
var ctx=document.getElementById("myCanvas")//找到我们创建的canvas
3.然后我们使用getContext方法来获取canvas 元素的上下文(context),目前在画布中支持2d作图，所以getContext的参数为2d，也许在以后会支持3d作图后，参数也许会有3d。
var context=c.getContext("2d");
4.使用JavaScript来进行绘图。在以后我们会接触到下面的基础绘图方法：
context.fillStyle="red"//设置填充颜色
context.fillRect(x1,y1,x2,y2)//其中x1,y1为矩形左上坐标，x2,y2为矩形右下坐标
context.strokeStyle="blue"//设置划线颜色
context.strokeRect(x1,y1,x2,y2)//同上所述
EX：构造宽200像素，高100像素的画布，在画布中创建一个填充颜色为#FF00FF的矩形
<!doctype html>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="#FF00FF";
context.fillRect(50,25,100,50);
</script>
</body>
</html>
HTML5 画布canvas元素的更多相关文章
- HTML5画布(CANVAS)速查简表
HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/
- HTML5画布Canvas
一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...
- 关于HTML5画布canvas的功能
一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid ...
- HTML5 画布canvas
SVG的<defs> <symbols> 元素用于预定义一个元素使其能够在SVG图像中重复使用 <svg xmlns="http://www.w3.org/20 ...
- 10款面向HTML5 画布(Canvas)的JavaScript库
https://www-evget-com/article/2014/4/9/20799.html
- HTML5之canvas元素
定义和用法 fillStyle 属性设置或返回用于填充绘画的颜色.渐变或模式. 默认值: #000000 JavaScript 语法: context.fillStyle=color|gradient ...
- 面向画布(Canvas)的JavaScript库
面向画布(Canvas)的JavaScript库 总结 每个库各有特色,根据需求选择 学习要点 面向画布(Canvas)的JavaScript库 EaselJS 是一个封装了 HTML5 画布(C ...
- 【HTML5】Canvas画布
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- Unicode中文和特殊字符的编码范围
编程中有时候需要用到匹配中文的正则,一般用 [ \u4e00-\u9fa5]+ 即可搞定.不过这正则对一般的火星文鸟语就不太适用了,甚至全角的标点符号都不包含在内.例如游戏里面的玩家名,普通青年一般都 ...
- Ajax代码简单封装。
function ajax(url, onsuccess, onfail) { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest( ...
- C#使用Process调用批处理阻塞问题
PS:又见到熟悉的C#代码了,好开心,哈哈哈.这次又跳坑了,好不容易才爬起来. 公司有自己开发的一套Submit.Compile.Publish的生命周期系统. 在Compile时,需要调用外部的 ...
- ThinkCMF-如何收藏
注:收藏对应的表名-cmf_user_favorites <php> $object_id = "1"; </php> <a href="{ ...
- c语言语系的命名风格和java系命名风格
c语言系的命名风格:单词之间使用下划线分隔.如上图. java语言是另外一个系,javascript属于java语系(当年就是想借助java的名气所以命名javascript).java语系是驼峰式命 ...
- 创业小坑：内网域名 在windows下能nslookup，但ping不通，也无法访问。而在linux下正常。
使用巴法络(BUFFALO )LS-XL 网络硬盘盒开启了FTP服务,IP是172.16.0.21 在windows和linux上,都可以访问ftp://172.16.0.21,现在想使用域名访问,便 ...
- 如何实现桌面App图标可以动态显示消息数(类似手机上的QQ图标)?
手机上的APP , 像QQ和微信等都可以在图标上动态显示消息数(最大99) , 那么你有没有想过这些效果是如何实现的?桌面上开发的传统应用程序能否也实现类似的功能? 1 思路 桌面快捷方式的图标本质上 ...
- 20款免费的 PSD 网站模板【免费下载】
如果你的新项目预算很低,那么免费网站模板对你来说是一个很好的解决方案.有很多的预先设计的网站模板 PSD 素材可以使用和自由定制.在这里,你会发现可供下载的超级棒的免费网站模板.你可以使用它们来创建自 ...
- 【Spring】Spring框架之Struts2和Spring的优点
Java Web开发使用Structs2和Spring框架的好处 今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制层的技术 ...
- sizzle源码分析 （3）sizzle 不能快速匹配时 选择器流程
如果快速匹配不成功,则会进入sizzle自己的解析顺序,主要流程如下: 总结流程如下: (1)函数sizzle是sizzle的入口,如果能querySelectAll快速匹配,则返回结果 (2)函数S ...