context.drawImage绘制图片

context.drawImage(img,x,y)  x,y图像起始坐标

context.drawImage(img,x,y,w,h) w,h指定图像的宽度和高度

context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) s被复制区域  d复制后

理解了其实挺简单的!就是不知道用用到多少?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEEEf";
context.fillRect(0,0,500,500);
image = new Image();
image.src = "图片地址";
image.onload = function(){}
}
function drawImage(context,image){
context.drawImage(image,100,100);
context.draeImage(image,270,270,380,380,230,230,240,240);
}
</script>
</head>
<body >
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

时间: 2024-10-11 12:04:59

context.drawImage绘制图片的相关文章

Canvas中 drawImage绘制图片不显示

在学习 html5中的 Canvas.drawImage时写了如下代码: <!doctype html> <html> <head><title>研究</title></head> <body> <canvas id="canvas" style="width:500px;height:400px; border:1px solid red"></canvas>

[ html drawImage 绘制图片 ] canvas绘制图片 drawImage 属性实例演示之二

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

[ html drawImage 绘制图片 ] canvas绘制图片 drawImage 属性实例演示

<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta name='description' content='this is my page'> <meta name='keywords' content='keyword1,keyword2,keyword3'> <meta http-equiv="

C# 解决DrawImage绘制图片拉伸产生渐变

ImageAttributes ImgAtt = new ImageAttributes(); ;                 ImgAtt.SetWrapMode(System.Drawing.Drawing2D.WrapMode.TileFlipXY); m_graphics.DrawImage(image, new System.Drawing.Rectangle((int)(x - width / 2 + backBmp1.Width), (int)(y - pixel + 1),

Canvas 中drawImage 绘制不出图片

在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> <canvas id="draw"></canvas> //js var Image = document.images[0]; var draw = document.getElementById('draw'); var context = draw.getCon

html5 绘制图片 drawImage

要在绘图上下文中绘制图片,可以使用 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 中的任一个对象.绘制参数的含义可以参看下图: 异常:如果第一个参数不是指定的元素类型

HTML5 绘制图片

作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/33344289 一.绘制图像 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本. drawImage(image,x,y) : 在canvas中(x,y)处绘制图片. drawImage(image,x,y,width,height) : 在canvas中(x,y)处绘制图片,并将其缩放到指定的宽度和高度. drawImage(image,source

HTML5之canvas 9绘制图片

绘制图片 Var image=new Image(); image.src=” http://img4.duitang.com/uploads/item/201406/25/20140625182321_4MTau.thumb.700_0.jpeg”; image.onload=function(){} Context.drawImage(image,x,y); Context.drawImage(image,x,y,w,h); Context.drawIamge(image,sx,sy,sw,

Java绘制图片生成图片文件进行预览

Java绘制图片并实现打印前生成图片文件进行预览, 适用于开发阶段. 如果要使用界面完成预览,请另找资源.这里用这个功能主要是用于结果预览,因为如果使用打印来进行结果验证,会浪费大量的纸张. Java代码: import java.awt.Color;import java.awt.Dimension;import java.awt.Font;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.Image;imp