`
xpp02
  • 浏览: 1048912 次
社区版块
存档分类
最新评论

HTML5 Canvas drawImage图像绘制

阅读更多

 

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坐标的偏移量)的宽度和高度值。

 

/*绘制图片
drawImage(x,y);
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坐标的偏移量)的宽度和高度值。
*/
function drawImage() {
Ca();
var canvas = draw();
var image = new Image();
image.src = "_image.png";
image.onload = function () {
for (var i = 0; i < 5; i++) {
canvas.drawImage(image, i * 50, i * 25, 379, 80);
}
};
}

 

接下来我们来画一个局部特写的图片和一组平铺图片

 

/*局部绘制
这里我们利用宽高可控制缩放
*/
function drawImageArea() {
Ca();
var canvas = draw();
var image = new Image();
image.src = "_image.png";
image.onload = function () {
canvas.drawImage(image, 180, 20, 100, 60, 50, 25, 379, 80);
};
}
/*图片
createPattern 可以实现平铺图片
createPattern(image,type)
image为要平铺的图像
type分为:
no-repeat:不平铺
repeat-x:横向平铺
repeat-y:纵向平铺
repeat:整体平铺
*/
function drawImagePingPu() {
Ca();
var canvas = draw();
var image = new Image();
image.src = "_image.png";
image.onload = function () {
var pp = canvas.createPattern(image, 'repeat');
canvas.fillStyle = pp;
canvas.fillRect(0, 0, wh.width, wh.height);
};
}

 

最后我们看一下剪裁图片,剪裁要与路径配合使用,通过路径与图像交叉的形式,调用clip方法剪裁图像。

 

/*图片剪裁
通过路径与图像交叉的形式,调用clip方法剪裁图像
*/
function drawImageClip() {
Ca();
var canvas = draw();
var image = new Image();
canvas.save();//保存当前画布
image.onload = function () {
canvas.beginPath();
canvas.arc(220, 100, 100, 0, 2 * Math.PI, true);//创建圆形剪裁路径
canvas.clip();//剪裁
canvas.drawImage(image, 180, 20, 100, 60, 50, 25, 379, 80);
};
image.src = "_image.png";

}

更多信息请查看 java进阶网 http://www.javady.com/index.php/category/thread

分享到:
评论

相关推荐

    详解canvas drawImage()方法绘制图片不显示的问题

    canvas API中的drawImage()方法是用于在HTML的canvas元素中绘制图像、视频或其他canvas元素的技术。然而,在使用drawImage()方法绘制图片时,开发者可能会遇到图片不显示的问题。为解决该问题,我们可以从以下几个...

    canvas.drawImage方法参数说明图.pptx

    在HTML5中,`canvas`元素提供了一个强大的二维绘图接口,允许开发者动态绘制图形、图片等元素。其中,`drawImage`方法是用于在canvas上绘制图像的关键函数。这个方法有着丰富的参数,能实现复杂的图像操作。接下来,...

    小程序中canvas的drawImage方法参数使用详解

    小程序中的drawImage方法与HTML5中canvas的drawImage方法类似,它允许我们在canvas画布上绘制图像。 首先,drawImage方法有三个不同的函数原型,分别如下: 1. drawImage(imageResource, dx, dy) 2. drawImage...

    HTML5 Canvas绘制灰太狼图像效果

    这个“HTML5 Canvas绘制灰太狼图像效果”是一个利用Canvas API实现的实例,展示了如何通过编程方式创建生动的图像。下面我们将深入探讨HTML5 Canvas的基本概念、绘图方法以及如何实现灰太狼图像的绘制。 1. HTML5 ...

    html5 canvas自动绘制背景图片效果代码

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。Canvas通过JavaScript API提供了大量的绘图方法,使得开发者能够直接在画布上绘制图像、线条、形状等...

    HTML5 Canvas绘制灰太狼图像效果.zip

    在这个"HTML5 Canvas绘制灰太狼图像效果.zip"压缩包中,包含了一个实例,演示如何利用Canvas API来绘制灰太狼这个卡通角色的图像,非常适合初学者学习和爱好者探索。 首先,我们要了解Canvas的基本用法。HTML5中的`...

    3.2 使用drawImage绘制图像|Canvas图像基础|Canvas图形、动画、游戏开发从入门到精通全系列课程

    3.2_使用drawImage绘制图像|Canvas图像基础|Canvas图形、动画、游戏开发从入门到精通全系列课程

    HTML5 Canvas一群鸟空中盘旋动画特效

    在这个特效中,我们主要关注的是`drawImage()`方法,它用于在Canvas上绘制图像。这里的“一群鸟”实际上可能是由多个重复的鸟图片组成,每个鸟的图像被绘制到Canvas的不同位置,形成鸟群的效果。开发者会根据鸟的...

    html5 canvas绘制孙悟空猴哥来拜年特效

    2. **绘制图像**:图像加载完成后,我们可以在Canvas上使用`drawImage()`方法绘制图像。这个方法接受三个或五个参数,分别表示图像源、源图像的起始位置和目标画布上的位置。 ```javascript ctx.drawImage(img, 0, ...

    html5 Canvas绘制2D背景2

    8. **图像处理**:可以使用`drawImage()`方法在Canvas上绘制图像,支持缩放、剪裁和旋转等操作。 9. **混合模式**:`globalCompositeOperation`属性允许我们设置不同的混合模式,实现复杂的图像叠加效果。 10. **...

    html5 canvas多边形分割图片动画

    首先,Canvas API提供了`drawImage()`方法,用于在画布上绘制图像。在本例中,我们可以将一张图片切割成多个多边形(如三角形、矩形或梯形)部分,这通常通过计算每个多边形的顶点坐标来实现。切割过程可能涉及到...

    html5canvas播放视频

    HTML5 Canvas 是一个强大的网页图形绘制工具,允许开发者在网页上动态绘制图像,而无需依赖任何插件。在这个场景中,我们关注的是如何利用Canvas来播放视频。这涉及到HTML5的Media API和Canvas API的结合使用,使得...

    HTML5 Canvas核心技术代码

    - `drawImage(image, dx, dy)`、`drawImage(image, dx, dy, dw, dh)`、`drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)`:将图像绘制到Canvas上,支持缩放和裁剪。 - `createPattern(image, repetition)`:...

    Canvas饼状图、绘制文字、绘制图像.zip

    Canvas是HTML5中引入的一个强大的绘图工具,它允许开发者在网页上进行动态图形渲染,提供了丰富的API来绘制各种形状、图像以及文本。这个压缩包文件"Canvas饼状图、绘制文字、绘制图像.zip"显然包含了关于如何使用...

    html5 canvas.rar

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,提供了丰富的API来创建交互式图像。这个"html5 canvas.rar"压缩包包含了一个关于Canvas的实例,非常适合那些想要学习或深化对HTML5 ...

    html5 canvas绘制有趣的情绪表情动画特效

    3. **图像处理**:`drawImage()`函数可以将图片资源加载到Canvas上,这在制作表情动画时非常有用,比如加载一张微笑的表情图片作为脸部的基础,然后在其上叠加绘制其他元素。 4. **颜色与渐变**:通过`fillStyle`和...

    html 5 Canvas绘制2D背景1

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态的2D图形绘制。这个技术的引入极大地扩展了网页的交互性和视觉效果,使得开发者可以创建丰富的、自定义的图形,包括背景图像。在这个“HTML 5 ...

    HTML5 Canvas API中drawImage()方法的使用实例

    其中,drawImage() 方法是一个非常实用且强大的函数,它能够将图像、视频或其他canvas元素绘制到当前的canvas上。使用drawImage() 方法,开发者不仅可以实现图像的绘制,还能对图像进行缩放、裁剪等操作。 ...

    html5 canvas 图片压缩

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图像处理,包括绘制、修改和操作图像。在HTML5 Canvas中,我们可以通过JavaScript API实现图片的压缩功能,这对于优化网页性能,尤其是处理...

Global site tag (gtag.js) - Google Analytics