一、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 画布的更多相关文章

  1. html5——canvas画布

    一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...

  2. html5 canvas画布上合成

    source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...

  3. HTML5 canvas画布写炫彩动态的倒计时效果

    html代码如下,插入了2个js代码. <!DOCTYPE html> <html> <head> <title>canvas</title> ...

  4. css总结19:HTML5 Canvas(画布)

    1  <canvas> 标签定义图形,比如图表和其他图像. 例1:简单使用: <canvas id="Canva" width="200" h ...

  5. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  6. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  7. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

  8. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  9. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

随机推荐

  1. [转]ios push

    转:http://blog.csdn.net/showhilllee/article/details/8631734 APNS的推送机制 首先我们看一下苹果官方给出的对ios推送机制的解释.如下图 P ...

  2. 你写的Try...Catch真的有必要么？

    很多人喜欢用Try...Catch把每一个方法都包裹起来,可是真的有必要么? 为什么要这样做?我估计是大家被BUG吓怕了,生怕生产环境出现各种莫名其妙的错误,比如最经典的NullReferenceEx ...

  3. 触摸java常量池

    java常量池是一个经久不衰的话题,也是面试官的最爱,题目花样百出,小菜早就对常量池有所耳闻,这次好好总结一下. 理论 小菜先拙劣的表达一下jvm虚拟内存分布:      程序计数器是jvm执行程序的 ...

  4. [ASP.NET MVC 小牛之路]04 - 依赖注入(DI)和Ninject

    本人博客已转移至:http://www.exblr.com/liam  为什么需要依赖注入 在[ASP.NET MVC 小牛之路]系列的理解MVC模式文章中,我们提到MVC的一个重要特征是关注点分离( ...

  5. Azure PowerShell (12) 通过Azure PowerShell创建SSH登录的Linux VM

    <Windows Azure Platform 系列文章目录> 本章将介绍如何使用Azure PowerShell,创建SSH登录的Linux VM 前提要求: 1.安装Azure Pow ...

  6. Base 64 编码

    原创地址:http://www.cnblogs.com/jfzhu/p/4020097.html 转载请注明出处 (一)Encoding VS. Encryption 很多人都以为编码(Encodin ...

  7. 【原】Python用例：将指定文件或目录打包成zip文件

    #This Demo is used to compress files to .zip file #Base on Windows import os import time #The files ...

  8. spring4mvc返回json(bean,list,map)

    因为spring3和spring4的mvc在前端返回json所需要的jar包不一样,所以索性写一篇关于spring4mvc在前端返回json的博文. 首先,新建一个web项目,项目格式如图所示: co ...

  9. Python 学习之路 （前言）

    为什么要学Python  1,脚本语言本身很方便简洁,未来会有趋势 2,web 方向 3,运维方向 我是学静态语言出身的,java,毕业后从事android 应用开发,曾在工作期间学习过linux,想 ...

  10. 即时搜索(input框)

    做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件    触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...