一、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 10 开发问题总结

    兼容iOS 10 资料整理笔记   1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大 ...

  2. unity3D学习—坦克大战（一）

    背景介绍 本人一名C#程序员,从事C#开发已经有四年有余了,目前在一家大型公司上班.鉴于公司的业务需要,现在需要学习unity3D游戏开发,好在unity支持C#脚本开发,无形中省下了许多重新学习新语 ...

  3. 思科交换机配置DHCP的四个方面

    这里我们主要讲解了思科交换机配置DHCP的相关内容.我们对网络拓扑先进行一下了解,然后对于其在进行一下说明,之后对于配置的代码和命令再进行一下解析. 思科交换机配置DHCP一.网络拓扑 思科交换机配置 ...

  4. 10年微软MVP路（如何成为一个MVP？）

    搞微软技术的,大家或多或少都有听说过微软的"最有价值专家"(MVP), 从2006年到2015年连续10年ASP.NET/IIS MVP.当年很多一起搞微软技术的朋友都转搞其他非微 ...

  5. PostgreSQL 杂志

    pgmag 团队刚发布了头两期 PostgreSQL 杂志,还有中文版http://pgmag.org/download,推荐广大 PostgreSQL 数据库管理员及开发者阅读: Issue #01 ...

  6. C#设计模式之命令

    IronMan之命令 在本篇中还是围绕着“IronMan”来讲,在上一篇“外观”中我们说到过“控制中心”.它是负责IronMan的核心,所有能想象到的功能都跟它有关系,就在使用它的时候,发现了一些问题 ...

  7. C语言 · 十六进制转十进制

    问题描述 从键盘输入一个不超过8位的正的十六进制数字符串,将它转换为正的十进制数后输出. 注:十六进制数中的10~15分别用大写的英文字母A.B.C.D.E.F表示. 样例输入 FFFF 样例输出 6 ...

  8. Qt And MFC UI Layout

    界面布局 起初,计算机的交互是通过输入的代码进行的, 慢慢的有了图形之后, 就开始了图形界面的交互. 目前来说还有语音交互, 视频交互等多媒体的交互. 不管哪一种交互, 最终在计算机的角度都是信号的输 ...

  9. Google Chrome调试js入门

    平常在开发过程中,经常会接触到前端页面.那么对于js的调试那可是家常便饭,不必多说.最近一直在用火狐的Firebug,但是不知道怎么的不好使了.网上找找说法,都说重新安装狐火浏览器就可以了,但是我安装 ...

  10. spring快速入门（一）

    对于为什么使用spring框架,这里不多做解释,详情请百度.本人推荐面向驱动程序学习,通过实战来瞧瞧spring技术的伟大.所以先来看看原始开发一个简单的例子,由例子引入spring相关的技术.如果错 ...