HTML5 Canvas 画布
一、Canvas是什么？
canvas，是一个画布，canvas元素用于在网页上绘制图形。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
二、创建Canvas元素
加上基本的属性：类，宽度和高度
<canvas class="MyCanvas" width:100px height:100px></canvas>
三、绘制路径
使用的是javascript元素来绘制，canvas本省不具备绘图的能力。所有的绘制必须通过javascript来完成。
1、JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2、绘制一个红色的矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
3、fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
四、坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
1、谷歌浏览器（chrome）
2、IE9浏览器下
3、IE8浏览器在（毫无压力）
五、代码部分
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<style type="text/css">
#box {
float: left;
width: 199px;
height: 99px;
border: 1px solid #c3c3c3;
}
</style>
<script type="text/javascript">
function xy_get(e) {
x = e.clientX;
y = e.clientY;
document.getElementById("xy_zuobiao").innerHTML = "Coordinates: (" + x + "," + y + ")";
} function xy_clear() {
document.getElementById("xy_zuobiao").innerHTML = "";
}
</script>
</head> <body >
<p>鼠标坐标：</p>
<div id="box" onmousemove="xy_get(event)" onmouseout="xy_clear()"></div>
<div id="xy_zuobiao"></div>
</body> </html>
HTML5 Canvas 画布的更多相关文章
- html5——canvas画布
一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...
- html5 canvas画布上合成
source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...
- HTML5 canvas画布写炫彩动态的倒计时效果
html代码如下,插入了2个js代码. <!DOCTYPE html> <html> <head> <title>canvas</title> ...
- css总结19:HTML5 Canvas(画布)
1 <canvas> 标签定义图形,比如图表和其他图像. 例1:简单使用: <canvas id="Canva" width="200" h ...
- Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- html5 canvas 画图移动端出现锯齿毛边的解决方法
使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- HTML5 中的 canvas 画布（一）
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...
随机推荐
- 浅析PHP中for与foreach两个循环结构遍历数组的区别
遍历一个数组是编程中最常见不过的了,这里跟大家讨论下for和foreach两种方法.用这两种方法执行遍历的场景太多太多了,这里我们只针对以下两个数组作为例子来讨论.所谓管中窥豹,多少能理清一点两者的区 ...
- android——相对布局，表格布局
1.相对布局 RelativeLayout 又称作相对布局,也是一种非常常用的布局.和LinearLayout 的排列规则不同,RelativeLayout 显得更加随意一些,它可以通过相对定位的方式 ...
- 打造AngularJs2.0开发环境
angularjs2.0刚发布, typescript2.0也刚发布, 于2016.9.29记录. 参考文档:https://angular.cn/docs/ts/latest/quickstart. ...
- 记sql server 2008R2 两台服务器 使用非默认端口的发布订阅
最近研究数据库的复制.因为要在两台服务器上,当使用数据库的默认1433端口时,订阅发布没有任何问题,考虑到数据库的安全性问题,需要改用其他端口.这里以10010为例. 有A.B两台服务器:A作为发布服 ...
- MySQL的特点
MySQL的特点 CPU特点 内存特点 磁盘特点 分析
- 谷歌发布的首款基于HTTP/2和protobuf的RPC框架：GRPC
Google 刚刚开源了grpc, 一个基于HTTP2 和 Protobuf 的高性能.开源.通用的RPC框架.Protobuf 本身虽然提供了RPC 的定义语法,但是一直以来,Google 只开 ...
- io.js入门（二）—— 所支持的ES6（上）
io.js的官网上有专门介绍其所支持的ES6特性的页面(点我查看),上面介绍到,相比nodeJS,io.js已从根本上支持了新版V8引擎上所支持的ES6特性,无需再添加任何运行时标志(如 --harm ...
- DDD实践问题之 - 关于论坛的帖子回复统计信息的更新的思考
之前,在用ENode开发forum案例时,遇到了关于如何实现论坛帖子的回复的统计信息如何更新的问题.后来找到了自己认为比较合理的解决方案,分享给大家.也希望能和大家交流,擦出更多的火花. 论坛核心领域 ...
- 干货!表达式树解析"框架"(3)
最新设计请移步 轻量级表达式树解析框架Faller http://www.cnblogs.com/blqw/p/Faller.html 这应该是年前最后一篇了,接下来的时间就要陪陪老婆孩子了 关于表达 ...
- 60分钟Python快速学习(给发哥一个交代)
60分钟Python快速学习 之前和同事谈到Python,每次下班后跑步都是在听他说,例如Python属于“胶水语言啦”,属于“解释型语言啦!”,是“面向对象的语言啦!”,另外没有数据类型,逻辑全靠空 ...