正文
关于html5drawimage参数的信息
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
HTML5中drawImage使用时遇到的问题及解决方法
HTML5中drawImage使用时遇到的问题及解决方法
HTML5中drawImage使用时遇到的问题及解决方法
使用Image遇到的问题：
$(function() {
var jsCanv = document.getElementById("canv");
var oCanv = jsCanv.getContext("2d");
var img = new Image();
img.src = "img.png";
oCanv.drawImage(img, 220, 30);
})
浏览器不支持
其实这种写法是有错误的，实际上只要一刷新图片就不显示出来。要想保证刷新正常显示需要在Image onload的`时候重绘一次才行。测试在chrome 19下会出现的问题。
解决方案
$(function() {
var jsCanv = document.getElementById("canv");
var oCanv = jsCanv.getContext("2d");
var img = new Image();
img.src = "img.png";
img.onload = function() {
oCanv.drawImage(img, 220, 30);
}
})
浏览器不支持
希望本文所述对大家的html5程序设计有所帮助。
;
相关问答
Q1: html5 canvas的drawImage，如果有一堆图片，名字分别是0,1,2,3。。怎么用javascript把每张图片给读出来
可以参考JavaScript Image Preloader 。
我写了一个代码，你看一下：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
/head
body onload=preloader()
canvas id="pad" width="100%" height="100%"/canvas
script language="JavaScript"
var ctx=document.getElementById('pad').getContext('2d');
var imageObj=new Image();
preloader();
imageObj.onload=function(){
for(var i=0;i6;i++)
ctx.drawImage(imageObj,0+i*20,0+1*20,80,40);
}
function preloader()
{
// counter
var i = 0;
// create object
//imageObj = new Image();
// set image list
images = new Array();
images[0]="images/0.jpg"
images[1]="images/1.jpg"
images[2]="images/2.jpg"
images[3]="images/3.jpg"
images[4]="images/4.jpg"
images[5]="images/5.jpg"
// start preloading
for(i=0; i=3; i++)
{
imageObj.src=images[i];
}
}
/script
/body
/html
Q2: 如何制作html5的动画效果？
主要思想：
首先要准备一张有连续帧的图片，然后利用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"
titleCanvas 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
h1HTML Canvas Animations Demo - By Gloomy Fish/h1
prePlay Animations/pre
div id="my_painter"
canvas id="animation_canvas"/canvas
/div
/body
/html
Q3: 如何使用HTML5 Canvas动态的绘制拓扑图
使用HTML5 Canvas动态的绘制拓扑图：
HTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型：
语法：
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
*第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。
*dx、dy是image在canvas中定位的坐标值；
*dw、dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值；
*sx、sy是image所要绘制的起始位置；
*sw、sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。
举例：
!DOCTYPE html
html
body
p要使用的图像：/p
img id="tulip" src="/i/eg_tulip.jpg" alt="The Tulip" /
p画布：/p
canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;"
Your browser does not support the HTML5 canvas tag.
/canvas
script
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
/script
/body
/html
Q4: 有关HTML5的drawImage()和ImageData的问题
通常不会. 但是在加载image的时候最好用onload事件判断图片是否加载完成. 然后再getImageData或者putImageData:
var canvas = document.getElementById('canvas');
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext('2d');
var imgDat;
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
imgDat = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log(imgDat); // Output imageData;
}
img.src = 'comment.gif';
Q5: 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"
titleCanvas
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
h1HTML
Canvas
Animations
Demo
-
By
Gloomy
Fish/h1
prePlay
Animations/pre
div
id="my_painter"
canvas
id="animation_canvas"/canvas
/div
/body
/html
