HTML5 Canvas 画布

一、Canvas是什么？

canvas，是一个画布，canvas元素用于在网页上绘制图形。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

二、创建Canvas元素

加上基本的属性：类，宽度和高度

三、绘制路径

使用的是javascript元素来绘制，canvas本省不具备绘图的能力。所有的绘制必须通过javascript来完成。

1、JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2、绘制一个红色的矩形：

3、fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

四、坐标

上面的 fillRect 方法拥有参数 (0,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

1、谷歌浏览器（chrome）

3、IE8浏览器在（毫无压力）

五、代码部分

<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;head</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> </span><span style="color: #ff0000;"&gt;charset</span><span style="color: #0000ff;"&gt;="utf-8"</span> <span style="color: #0000ff;"&gt;/></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;style </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="text/css"</span><span style="color: #0000ff;"&gt;></span><span style="background-color: #f5f5f5; color: #800000;"&gt;
        #<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> </span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
            float</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; left</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
            width</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 199px</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
            height</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 99px</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
            border</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 1px solid #c3c3c3</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span>
        <span style="background-color: #f5f5f5; color: #000000;"&gt;}</span>
    <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;style</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;script </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="text/javascript"</span><span style="color: #0000ff;"&gt;></span>
        <span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; xy_get(e) {
            x </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; e.clientX;
            y </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; e.clientY;
            document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;xy_zuobiao</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;).innerHTML </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;Coordinates: (</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;+</span><span style="background-color: #f5f5f5; color: #000000;"&gt; x </span><span style="background-color: #f5f5f5; color: #000000;"&gt;+</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;+</span><span style="background-color: #f5f5f5; color: #000000;"&gt; y </span><span style="background-color: #f5f5f5; color: #000000;"&gt;+</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;)</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
        }

        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; xy_clear() {
            document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;xy_zuobiao</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;).innerHTML </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;""</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
        }
    </span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;head</span><span style="color: #0000ff;"&gt;></span>

<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;body </span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;p</span><span style="color: #0000ff;"&gt;></span>鼠标坐标：<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;p</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;div </span><span style="color: #ff0000;"&gt;id</span><span style="color: #0000ff;"&gt;="<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"</span><span style="color: #ff0000;"&gt; onmousemove</span><span style="color: #0000ff;"&gt;="xy_get(event)"</span><span style="color: #ff0000;"&gt; onmou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut</span><span style="color: #0000ff;"&gt;="xy_clear()"</span><span style="color: #0000ff;"&gt;></</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;div </span><span style="color: #ff0000;"&gt;id</span><span style="color: #0000ff;"&gt;="xy_zuobiao"</span><span style="color: #0000ff;"&gt;></</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;body</span><span style="color: #0000ff;"&gt;></span>

原文链接：https://www.f2er.com/html5/73144.html

猜你在找的HTML5相关文章