HTML5 Canvas实现放大镜效果示例_html5教程技巧

来源:脚本之家  责任编辑:小易  

看到你标题说HTML5能画地图,就来了兴趣,特意百度了下资料,不过资料上的地图好像是一张图片,并非画

图片放大镜效果

HTML5用canvas实现动画效果的方法:<!DOCTYPE HTML><

在线源码预览

可以用JS监控屏幕大小,然后调整Canvas的大小。在代码中加入JS$(window).resiz

源码

原理

首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示:

html5 canvas按钮功能帮忙实现一下 5 我想实现一个改变画板颜色和橡皮擦功能的按钮,但就

初始化

这是因为图像的采样方式不够好造成的解决方案是自己写算法进行平均采样实现方式有两种,一种是js

<canvas id="canvas" width="500" height="500"> </canvas> <img src="image.png" style="display: none" id="img">

1、对于衡水中学的学生来说,高考是阶层上升的唯一途径。只有高考不是唯一上升渠道的人,才可以有质疑这个教育模式的权利。我的朋友一家在上海,收入颇丰。他们考虑怎么对孩子进行素质教育,快乐教育,怎么培养孩子的兴趣爱好。他们的孩子从小上着双语学校,寒暑假去国外夏令营。这样的家庭,拥有可以选择的权利,国内高考不适合自己的孩子,那就送出国读书。读书不好,可以投入大笔资金创业。再假设一个农村或者山区的孩子,再或者衡水中学的普通孩子,他们想要在大城市立足,有一份体面的工作,他们别无选择,只有高考一条路。他们创业,家里不能提供启动资金,父母没有用的上的社会关系。他们高考分数不够,没有其他能接受高等教育的方法。有

获得 canvas 和 image 对象,这里使用 <img> 标签预加载图片, 关于图片预加载可以看这里

A:最常见的理论是睡觉过程中人体应当头朝北,脚冲南,和地球磁力线方向一致。因为,如果人的睡眠方向与地球磁力线方向垂直,地球磁场就会影响人体生物电流。人体为达到新的平衡状态,就必须消耗大量热能来提高代谢能力,睡眠自然受干扰。现代西医睡觉要头北脚南。人体随时随地都受到地球磁场的影响,睡眠的过程中大脑同样受到磁场的干扰。人睡觉时采取头北脚南的姿势,使磁力线平稳地穿过人体,最大限度地减少地球磁场的干扰。客厅B:人睡觉头朝南北好,还是东西好,这个还不知道,专家的话也不是全正确,中国农村盖房都是门朝南的为正房,门口倆边留有窗户,我去过几个省,农村人.住宿的床住,都是东西睡向,没有南北睡向的,并且老人住东间

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var img = document.getElementById("img");

有一天,有两条蛇在吃饭。眼镜蛇:“哥们,你说,咱们是毒蛇么?”银环蛇:“是啊,怎么了?”眼镜蛇:“额,我刚刚……不小心咬到舌头了……”银环蛇:“哈哈哈哈哈哈你真傻……哎呦……我也咬到了……好疼……”两条蛇:哎呀呀,小朋友,你说,我们会死吗?大部分毒蛇,对自己和同类毒蛇的毒液是不会中毒的,或者即使中毒也会比较轻微,不至于死;但是它们要是被其他类型的毒蛇咬了,还是可能会被毒死的。例如金环蛇和一些类型的眼镜蛇就会被其他毒蛇毒死。而下面这种美洲的食鱼蝮蛇,要是真的不小心咬到自己,还真的会把自己毒死哦。还有---毒蝰,若咬了自己同时注入的毒液超过一定量的话,也会被自己的毒液毒死。▼还有一部分吃蛇的蛇,例

设置相关变量

说起来不管是什么样的手机品牌总会被人说,就像你所说的,有人认为用苹果手机的人是在装X。然而现在的苹果手机的价位虽然比较高,但是人们的生活水平都已经上升,对于苹果手机的价位都是可以接受。说是装X是因为以前有一些人因为买不起苹果手机就去卖肾的情况,因此流传至今。vivo手机的情况也是差不多的。众做周知,vivo手机一直以来都不是以性能作为卖点,而是以拍照和音质作为其卖点,并且以优秀的使用体验获得了成功。在这个卖点上,因为其手机性能并不出众,因此在注重性能参数的网络中,vivo就成为了被攻击的对象,也就有了这个说法。然而即使有这么个说法,依然没有阻碍vivo手机的持续热销。如今的消费者对于手机性能已

// 图片被放大区域的中心点,也是放大镜的中心点 var centerPoint = {}; // 图片被放大区域的半径 var originalRadius = 100; // 图片被放大区域 var originalRectangle = {}; // 放大倍数 var scale = 2; // 放大后区域 var scaleGlassRectangle

画背景图片

function drawBackGround() { context.drawImage(img, 0, 0); }

计算图片被放大的区域的范围

这里我们使用鼠标的位置作为被放大区域的中心点(放大镜随着鼠标移动而移动),因为 canvas 在画图片的时候,需要知道左上角的坐标以及区域的宽高,所以这里我们计算区域的范围

function calOriginalRectangle(point) { originalRectangle.x = point.x - originalRadius; originalRectangle.y = point.y - originalRadius; originalRectangle.width = originalRadius * 2; originalRectangle.height = originalRadius * 2; }

绘制放大镜区域

裁剪区域

放大镜一般是圆形的,这里我们使用 clip 函数裁剪出一个圆形区域,然后在该区域中绘制放大后的图。一旦裁减了某个区域,以后所有的绘图都会被限制的这个区域里,这里我们使用 saverestore 方法清除裁剪区域的影响。save 保存当前画布的一次状态,包含 canvas 的上下文属性,例如 stylelineWidth 等,然后会将这个状态压入一个堆栈。restore 用来恢复上一次 save 的状态,从堆栈里弹出最顶层的状态。

context.save(); context.beginPath(); context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false); context.clip(); ...... context.restore();

计算放大镜区域

通过中心点、被放大区域的宽高以及放大倍数,获得区域的左上角坐标以及区域的宽高。

scaleGlassRectangle = { x: centerPoint.x - originalRectangle.width * scale / 2, y: centerPoint.y - originalRectangle.height * scale / 2, width: originalRectangle.width * scale, height: originalRectangle.height * scale }

绘制图片

在这里我们使用 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 方法,将 canvas 自身作为一副图片,然后取被放大区域的图像,将其绘制到放大镜区域里。

context.drawImage(canvas, originalRectangle.x, originalRectangle.y, originalRectangle.width, originalRectangle.height, scaleGlassRectangle.x, scaleGlassRectangle.y, scaleGlassRectangle.width, scaleGlassRectangle.height );

绘制放大边缘

createRadialGradient 用来绘制渐变图像

context.beginPath(); var gradient = context.createRadialGradient( centerPoint.x, centerPoint.y, originalRadius - 5, centerPoint.x, centerPoint.y, originalRadius); gradient.addColorStop(0, 'rgba(0,0,0,0.2)'); gradient.addColorStop(0.80, 'silver'); gradient.addColorStop(0.90, 'silver'); gradient.addColorStop(1.0, 'rgba(150,150,150,0.9)'); context.strokeStyle = gradient; context.lineWidth = 5; context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false); context.stroke();

添加鼠标事件

为 canvas 添加鼠标移动事件

canvas.onmousemove = function (e) { ...... }

转换坐标

鼠标事件获得坐标一般为屏幕的或者 window 的坐标,我们需要将其装换为 canvas 的坐标。getBoundingClientRect 用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。

function windowToCanvas(x, y) { var bbox = canvas.getBoundingClientRect(); return {x: x - bbox.left, y: y - bbox.top} }

修改鼠标样式

我们可以通过 css 来修改鼠标样式

#canvas { display: block; border: 1px solid red; margin: 0 auto; cursor: crosshair; }

图表放大镜

我们可能基于 canvas 绘制一些图表或者图像,如果两个元素的坐标离得比较近,就会给元素的选择带来一些影响,例如我们画两条线,一个线的坐标是(200.5, 400) -> (200.5, 200),另一个线的坐标为 (201.5, 400) -> (201.5, 20),那么这两条线几乎就会重叠在一起,如下图所示:

使用图表放大镜的效果

在线演示    源码

原理

类似于地图中的图例,放大镜使用较为精确的图例,如下图所示:

在放大镜坐标系统中,原始的区域会变大,如下图所示

绘制原始线段

首先创建一个线段对象

function Line(xStart, yStart, xEnd, yEnd, index, color) { // 起点x坐标 this.xStart = xStart; // 起点y坐标 this.yStart = yStart; // 终点x坐标 this.xEnd = xEnd; // 终点y坐标 this.yEnd = yEnd; // 用来标记是哪条线段 this.index = index; // 线段颜色 this.color = color; }

初始化线段

// 原始线段 var chartLines = new Array(); // 处于放大镜中的原始线段 var glassLines; // 放大后的线段 var scaleGlassLines; // 位于放大镜中的线段数量 var glassLineSize; function initLines() { var line; line = new Line(200.5, 400, 200.5, 200, 0, "#888"); chartLines.push(line); line = new Line(201.5, 400, 201.5, 20, 1, "#888"); chartLines.push(line); glassLineSize = chartLines.length; glassLines = new Array(glassLineSize); for (var i = 0; i < glassLineSize; i++) { line = new Line(0, 0, 0, 0, i); glassLines[i] = line; } scaleGlassLines = new Array(glassLineSize); for (var i = 0; i < glassLineSize; i++) { line = new Line(0, 0, 0, 0, i); scaleGlassLines[i] = line; } }

绘制线段

function drawLines() { var line; context.lineWidth = 1; for (var i = 0; i < chartLines.length; i++) { line = chartLines[i]; context.beginPath(); context.strokeStyle = line.color; context.moveTo(line.xStart, line.yStart); context.lineTo(line.xEnd, line.yEnd); context.stroke(); } }

计算原始区域和放大镜区域

function calGlassRectangle(point) { originalRectangle.x = point.x - originalRadius; originalRectangle.y = point.y - originalRadius; originalRectangle.width = originalRadius * 2; originalRectangle.height = originalRadius * 2; scaleGlassRectangle.width = originalRectangle.width * scale; scaleGlassRectangle.height = originalRectangle.height * scale; scaleGlassRectangle.x = originalRectangle.x + originalRectangle.width / 2 - scaleGlassRectangle.width / 2; scaleGlassRectangle.y = originalRectangle.y + originalRectangle.height / 2 - scaleGlassRectangle.height / 2; // 将值装换为整数 scaleGlassRectangle.width = parseInt(scaleGlassRectangle.width); scaleGlassRectangle.height = parseInt(scaleGlassRectangle.height); scaleGlassRectangle.x = parseInt(scaleGlassRectangle.x); scaleGlassRectangle.y = parseInt(scaleGlassRectangle.y); }

计算线段在新坐标系统的位置

由原理图我们知道,放大镜中使用坐标系的图例要比原始坐标系更加精确,比如原始坐标系使用 1:100,那么放大镜坐标系使用 1:10,因此我们需要重新计算线段在放大镜坐标系中的位置。同时为了简便,我们将线段的原始坐标进行了转化,减去原始区域起始的x值和y值,即将原始区域左上角的点看做为(0,0)

function calScaleLines() { var xStart = originalRectangle.x; var xEnd = originalRectangle.x + originalRectangle.width; var yStart = originalRectangle.y; var yEnd = originalRectangle.y + originalRectangle.height; var line, gLine, sgLine; var glassLineIndex = 0; for (var i = 0; i < chartLines.length; i++) { line = chartLines[i]; // 判断线段是否在放大镜中 if (line.xStart < xStart || line.xEnd > xEnd) { continue; } if (line.yEnd > yEnd || line.yStart < yStart) { continue; } gLine = glassLines[glassLineIndex]; sgLine = scaleGlassLines[glassLineIndex]; if (line.yEnd > yEnd) { gLine.yEnd = yEnd; } if (line.yStart < yStart) { gLine.yStart = yStart; } gLine.xStart = line.xStart - xStart; gLine.yStart = line.yStart - yStart; gLine.xEnd = line.xEnd - xStart; gLine.yEnd = line.yEnd - yStart; sgLine.xStart = parseInt(gLine.xStart * scale); sgLine.yStart = parseInt(gLine.yStart * scale); sgLine.xEnd = parseInt(gLine.xEnd * scale); sgLine.yEnd = parseInt(gLine.yEnd * scale); sgLine.color = line.color; glassLineIndex++; } glassLineSize = glassLineIndex; }

绘制放大镜中心点

绘制放大镜中心的瞄准器

function drawAnchor() { context.beginPath(); context.lineWidth = 2; context.fillStyle = "#fff"; context.strokeStyle = "#000"; context.arc(parseInt(centerPoint.x), parseInt(centerPoint.y), 10, 0, Math.PI * 2, false); var radius = 15; context.moveTo(parseInt(centerPoint.x - radius), parseInt(centerPoint.y)); context.lineTo(parseInt(centerPoint.x + radius), parseInt(centerPoint.y)); context.moveTo(parseInt(centerPoint.x), parseInt(centerPoint.y - radius)); context.lineTo(parseInt(centerPoint.x), parseInt(centerPoint.y + radius)); //context.fill(); context.stroke(); }

绘制放大镜

function drawMagnifyingGlass() { calScaleLines(); context.save(); context.beginPath(); context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false); context.clip(); context.beginPath(); context.fillStyle = "#fff"; context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false); context.fill(); context.lineWidth = 4; for (var i = 0; i < glassLineSize; i++) { context.beginPath(); context.strokeStyle = scaleGlassLines[i].color; context.moveTo(scaleGlassRectangle.x + scaleGlassLines[i].xStart, scaleGlassRectangle.y + scaleGlassLines[i].yStart); context.lineTo(scaleGlassRectangle.x + scaleGlassLines[i].xEnd, scaleGlassRectangle.y + scaleGlassLines[i].yEnd); context.stroke(); } context.restore(); context.beginPath(); var gradient = context.createRadialGradient( parseInt(centerPoint.x), parseInt(centerPoint.y), originalRadius - 5, parseInt(centerPoint.x), parseInt(centerPoint.y), originalRadius); gradient.addColorStop(0.50, 'silver'); gradient.addColorStop(0.90, 'silver'); gradient.addColorStop(1, 'black'); context.strokeStyle = gradient; context.lineWidth = 5; context.arc(parseInt(centerPoint.x), parseInt(centerPoint.y), originalRadius, 0, Math.PI * 2, false); context.stroke(); drawAnchor(); }

添加事件

鼠标拖动

鼠标移动到放大镜上,然后按下鼠标左键,可以拖动放大镜,不按鼠标左键或者不在放大镜区域都不可以拖动放大镜。

为了实现上面的效果,我们要实现3种事件 mousedown, mousemove, 'mouseup', 当鼠标按下时,检测是否在放大镜区域,如果在,设置放大镜可以移动。鼠标移动时更新放大镜中兴点的坐标。鼠标松开时,设置放大镜不可以被移动。

canvas.onmousedown = function (e) { var point = windowToCanvas(e.clientX, e.clientY); var x1, x2, y1, y2, dis; x1 = point.x; y1 = point.y; x2 = centerPoint.x; y2 = centerPoint.y; dis = Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2); if (dis < Math.pow(originalRadius, 2)) { lastPoint.x = point.x; lastPoint.y = point.y; moveGlass = true; } } canvas.onmousemove = function (e) { if (moveGlass) { var xDis, yDis; var point = windowToCanvas(e.clientX, e.clientY); xDis = point.x - lastPoint.x; yDis = point.y - lastPoint.y; centerPoint.x += xDis; centerPoint.y += yDis; lastPoint.x = point.x; lastPoint.y = point.y; draw(); } } canvas.onmouseup = function (e) { moveGlass = false; }

鼠标双击

当移动到对应的线段上时,鼠标双击可以选择该线段,将该线段的颜色变为红色。

canvas.ondblclick = function (e) { var xStart, xEnd, yStart, yEnd; var clickPoint = {}; clickPoint.x = scaleGlassRectangle.x + scaleGlassRectangle.width / 2; clickPoint.y = scaleGlassRectangle.y + scaleGlassRectangle.height / 2; var index = -1; for (var i = 0; i < scaleGlassLines.length; i++) { var scaleLine = scaleGlassLines[i]; xStart = scaleGlassRectangle.x + scaleLine.xStart - 3; xEnd = scaleGlassRectangle.x + scaleLine.xStart + 3; yStart = scaleGlassRectangle.y + scaleLine.yStart; yEnd = scaleGlassRectangle.y + scaleLine.yEnd; if (clickPoint.x > xStart && clickPoint.x < xEnd && clickPoint.y < yStart && clickPoint.y > yEnd) { scaleLine.color = "#f00"; index = scaleLine.index; break; } } for (var i = 0; i < chartLines.length; i++) { var line = chartLines[i]; if (line.index == index) { line.color = "#f00"; } else { line.color = "#888"; } } draw(); }

键盘事件

因为线段离得比较近,所以使用鼠标移动很难精确的选中线段,这里使用键盘的w, a, s, d 来进行精确移动

document.onkeyup = function (e) { if (e.key == 'w') { centerPoint.y = intAdd(centerPoint.y, -0.2); } if (e.key == 'a') { centerPoint.x = intAdd(centerPoint.x, -0.2); } if (e.key == 's') { centerPoint.y = intAdd(centerPoint.y, 0.2); } if (e.key == 'd') { centerPoint.x = intAdd(centerPoint.x, 0.2); } draw(); }

** 参考资料 **

HTML5-MagnifyingGlass

到此这篇关于HTML5 Canvas实现放大镜效果示例的文章就介绍到这了,更多相关HTML5 Canvas放大镜内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

HTML5用canvas怎么实现动画效果

canvas画图,canvas对象为var c=document.getElementById("myCanvas");其应有js属性方法如下列举:

1:绘制渲染对象,c.getContext("2d"),获取2d绘图对象,无论我们调用多少次获取的对象都将是相同的对象。

2:绘制方法:

clecrRect(left,top,width,height)清除制定矩形区域,

fillRect(left,top,width,height)绘制矩形,并以fillStyle填充。

fillText(text,x,y)绘制文字;

strokeRect(left,top,width,height)绘制矩形,以strokeStyle绘制边界。

beginPath():开启路径的绘制,重置path为初始状态;

closePath():绘制路径path结束,它会绘制一个闭合的区间,添加一条起始位置到当前坐标的闭合曲线;

moveTo(x,y):设置绘图其实坐标。

lineTo(x,y);绘制从当前其实位置到x,y直线。

fill(),stroke(),clip():在完成绘制的最后的填充和边界轮廓,剪辑区域。

arc():绘制弧,圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小;

rect():矩形路径;

drawImage(Imag img):绘制图片;

quadraticCurveTo():二次样条曲线路径,参数两个控制点;

bezierCurveTo():贝塞尔曲线,参数三个控制点;

createImageData,getImageData,putImageData:为Canvas中像素数据。ImageData为记录width、height、和数据 data,其中data为我们色素的记录为

argb,所以数组大小长度为width*height*4,顺序分别为rgba。getImageData为获取矩形区域像素,而putImageData则为设置矩形区域像素;

… and so on!

3:坐标变换:

translate(x,y):平移变换,原点移动到坐标(x,y);

rotate(a):旋转变换,旋转a度角;

scale(x,y):伸缩变换;

save(),restore():提供和一个堆栈,保存和恢复绘图状态,save将当前绘图状态压入堆栈,restore出栈,恢复绘图状态;

HTML5用canvas怎么实现动画效果

素材准备,基本框架的建立。

这里我们让一个有字的图片从左到右运动起来。

1.素材:图片一张。

2.框架的建立(如下图)

3.将图片素材引入网页。

4.定义canvas标签,获取canvas的上下文。

5.定义一个画图片的函数,使用canavs绘图API里面的drawImage来完成。

6.写一个更新的函数,因为我们要让他动起来,所以每时刻绘制的地方都不一样。注意:这儿要用clearRect,这个函数,主要是为了清空画布。

7.写定时函数,每隔0.2秒就更新一次,重新绘制。

我们来看看最终的效果和所有代码吧!

HTML5用canvas怎么实现动画效果

主要思想:

首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧,这样看起来就像动画在播放。

关键技术点:

JavaScript 函数setTimeout()有两个参数,第一个是参数可以传递一个JavaScript方法,

另外一个参数代表间隔时间,单位为毫秒数。代码示例:

setTimeout( update, 1000/30);

Canvas的API-drawImage()方法,需要指定全部9个参数:

ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);

其中offw, offh是指源图像的起始坐标点,width, height表示源图像的宽与高,x2,y2表

示源图像在目标Canvas上的起始坐标点。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="chrome=IE8">

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<title>Canvas Mouse Event Demo</title>

<link href="default.css" rel="stylesheet" />

<script>

var ctx = null; // global variable 2d context

var started = false;

var mText_canvas = null;

var x = 0, y =0;

var frame = 0; // 22 5*5 + 2

var imageReady = false;

var myImage = null;

var px = 300;

var py = 300;

var x2 = 300;

var y2 = 0;

window.onload = function() {

var canvas = document.getElementById("animation_canvas");

console.log(canvas.parentNode.clientWidth);

canvas.width = canvas.parentNode.clientWidth;

canvas.height = canvas.parentNode.clientHeight;

if (!canvas.getContext) {

console.log("Canvas not supported. Please install a HTML5 compatible browser.");

return;

}

// get 2D context of canvas and draw rectangel

ctx = canvas.getContext("2d");

ctx.fillStyle="black";

ctx.fillRect(0, 0, canvas.width, canvas.height);

myImage = document.createElement('img');

myImage.src = "../robin.png";

myImage.onload = loaded();

}

function loaded() {

imageReady = true;

setTimeout( update, 1000/30);

}

function redraw() {

ctx.clearRect(0, 0, 460, 460)

ctx.fillStyle="black";

ctx.fillRect(0, 0, 460, 460);

// find the index of frames in image

var height = myImage.naturalHeight/5;

var width = myImage.naturalWidth/5;

var row = Math.floor(frame / 5);

var col = frame - row * 5;

var offw = col * width;

var offh = row * height;

// first robin

px = px - 5;

py = py - 5;

if(px < -50) {

px = 300;

}

if(py < -50) {

py = 300;

}

//var rate = (frame+1) /22;

//var rw = Math.floor(rate * width);

//var rh = Math.floor(rate * height);

ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height);

// second robin

x2 = x2 - 5;

y2 = y2 + 5;

if(x2 < -50) {

x2 = 300;

y2 = 0;

}

ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width, height);

}

function update() {

redraw();

frame++;

if (frame >= 22) frame = 0;

setTimeout( update, 1000/30);

}

</script>

</head>

<body>

<h1>HTML Canvas Animations Demo - By Gloomy Fish</h1>

<pre>Play Animations</pre>

<div id="my_painter">

<canvas id="animation_canvas"></canvas>

</div>

</body>

</html>

HTML5用canvas怎么实现动画效果

写个函数,不断绘图。。。

  • 本文相关:
  • canvas离屏技术与放大镜实现代码示例
  • HTML5用canvas怎么实现动画效果
  • HTML5用canvas怎么实现动画效果
  • HTML5用canvas怎么实现动画效果
  • HTML5用canvas怎么实现动画效果
  • 有谁有使用HTML5Canvas实现蜡笔或者粉笔效果画笔的经验?
  • HTML5 Canvas元素绘制地图,已绘制出地图,并且地图可放大缩小,怎样实现鼠标移动到一幢楼时显...
  • HTML5用canvas怎么实现动画效果
  • html5 Canvas 如何自适应屏幕大小?
  • html5 canvas按钮功能帮忙实现一下
  • HTML5 canvas 画图, 大图缩小时清晰度问题
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5放大镜canvascanvas离屏技术与放大镜实现代码示例html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解html2canvas截图空白问题的解决html5视频常用api接口的实战示例html5页面上如何禁止手机虚拟键盘弹出html5 canvas实现图片标记、缩放、移动和保存历史状态html+css+jquery实现左侧滑动拉伸导航菜单栏的示例代canvas实现手机的手势解锁的步骤详细 html利用九宫格原理进行网页布局html5默认气泡修改的代码详解canvas如何实现多张图片编辑的图片编辑器html5表单验证特性(知识点小结)
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved