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中include()与require()的区别说明
require 的使用方法如 require("MyRequireFile.php"); .这个函数通常放在 PHP 程序的最前面,PHP 程序在执行前,就会先读入 require ...
- 实现滑动条与表单中的input中的value交互
最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...
- jQuery最基础最全面的选择器大览
一.基本选择器 1.标签选择器 (element):根据给定的标签名匹配元素 eg:$("h2")选取所有h2元素 --- 返回元素集合 2.类选择器 (.class):根 ...
- SageCRM 页面加载完后，用下拉框联动修改放大镜字段的取值范围
原理很简单就是修改放大镜属性中的sql. 函数如下:第一个参数是字段的名称.第二个参数是需要控制这个放大镜的sql.可以跟进下拉框的值来组织这个sql. /*--------------- For C ...
- HTTP method POST is not supported by this URL
修改提交页面的提交方式,修改method为get(在index页面中html标签 method="get") 示例代码修改后的代码: <form action="s ...
- Android内存泄漏分享
内容概述 内存泄漏和内存管理相关基础. Android中的内存使用. 内存分析工具和实践. 以下内容不考虑非引用类型的数据,或者将其等同为对应的引用类型看待--一切皆对象. 内存泄漏概念 不再使用的对 ...
- ASP.NET Core 数据保护（Data Protection）【中】
前言 上篇主要是对 ASP.NET Core 的 Data Protection 做了一个简单的介绍,本篇主要是介绍一下API及使用方法. API 接口 ASP.NET Core Data Prote ...
- 现在创业做App,先做 Android 还是 iOS？
随着互联网+的高速发展,现在创业大部分都是在布局移动端,初期往往摆在面前最大的难题是,如何分配有限的成本,在最快的速度内占领市场?这个大难题会影响创始人在团队和产品建设方方面面的决定.缩小至移动App ...
- 作业二：个人编程项目——编写一个能自动生成小学四则运算题目的程序
1. 编写一个能自动生成小学四则运算题目的程序.(10分) 基本要求: 除了整数以外,还能支持真分数的四则运算. 对实现的功能进行描述,并且对实现结果要求截图. 本题发一篇随笔,内容包括: 题 ...
- （源码下载）高灵活度，高适用性，高性能，轻量级的 ORM 实现
我在上一篇博客中简单说明了一个面向内存数据集的“ORM”的实现方法,也提到我的设计实现或许不能称之为“ORM”,姑且称之为 S-ORM吧. 可能有些小伙伴没有理解我的思路和目的,与传统ORM框架做了简 ...