html5画布作品,HTML5 Canvas 画布(示例代码)

一、Canvas是什么？

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

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

二、创建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浏览器在(毫无压力)

五、代码部分

#box{float:left;width:199px;height:99px;border:1px solid #c3c3c3;

}

functionxy_get(e) {

x=e.clientX;

y=e.clientY;

document.getElementById("xy_zuobiao").innerHTML= "Coordinates: (" +x+ "," +y+ ")";

}functionxy_clear() {

document.getElementById("xy_zuobiao").innerHTML= "";

}

鼠标坐标：

html5画布作品,HTML5 Canvas 画布(示例代码)相关推荐

html5获取gps坐标,html5获取手机GPS信息的示例代码
html5获取手机GPS信息的示例代码function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCu ...
html5画布作品,HTML5 canvas画布
这里创建canvas标签,并定义其id为mycanvas,便于javascript绘图时获取该标签对象. 再看javascript绘图部分: var c=document.getelementbyid ...
如何用html5实现网页聊天,HTML5 WebSocket实现点对点聊天的示例代码
HTML5的websocket与Tomcat实现了多人聊天,那是最简单也是最基本的,其中注意的就是开发环境,要满足jdk1.7和tomcat8,当然了tom7的7.063也行,在网站上找到了用goog ...
html5列表标签代码,HTML5列表标签和表格标签(示例代码)
一.列表 1.1 什么是列表标签? 作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一对数据是一个整体无序列表---unordered-list(最多):新闻列表.导航.商品列表作用: ...
codesmith 模板 html5,js-template-art【二】语法(示例代码)
一.模板语法 1.变量使用与输出或: {{ifuser}} {{user.name}} {{/if}} art-template 同时支持 {{expression}} 简约语法与任意 JavaSc ...
android html5 加密,android studio MD5加密示例代码
md5加密法核心源码 package com.study.luoki; import android.app.*; import android.os.*; import android.widget ...
html5毕业设计作品,html5毕业设计.doc
html5毕业设计 html5毕业设计篇一:[毕业论文]基于HTML5 CSS3的相册设计与实现摘要在当今社会,相册影像已成为人们生活和工作中日以追求的物质和精神需求,婚纱影像.儿童写真.个人 ...
【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心示例 )
文章目录一.鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 1.保存当前鼠标指针指向的位置 2.根据鼠标指针指向的位置以及比例重新计算图片位置二.绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩 ...
从0开始canvas系列一 --- canvas画布
从0开始canvas系列从0开始canvas系列一 - canvas画布从0开始canvas系列二 - 文本和图像从0开始canvas系列三 - 图像像素级操作从0开始canvas系列四 - ...

html5画布作品,HTML5 Canvas 画布(示例代码)

html5画布作品,HTML5 Canvas 画布(示例代码)相关推荐

最新文章

热门文章