canvas之putImageData

putImageData(imageData,x,y,dx,dy,dw,dh);

参数解释:

  x:imageData对象的x坐标;

  y:imageData对象的y坐标;

dx:x方向的偏移量

    dy:y方向的偏移量

  dw:宽度

dy:高度

其中imageData,x,y是必选参数,省略后面参数时指将imageData在(x,y)坐标处完全绘制出。

后面4个参数要一起出现,不省略后面参数时指,可以将imageData想象成一个框,框里有设置好像素的内容,该框的坐标是(x,y),然后在绘制的时候,并不绘制整个框里面的内容,而是绘制(dx,dx)开始的内容,内容的大小为dx,dy

ctx.putImageData(imageData,40,240,30,30,150,150);
ctx.putImageData(imageData,40,380);

时间: 2024-10-08 23:08:44

canvas之putImageData的相关文章

Canvas get/putImageData

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>get/putImageData</title> </head> <body> <canvas id='myCanvas' width='800' height='400'> your browser does not s

HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">

jquery mobile使用过程中遇到的一些问题及解决方法

最近在项目在综合考虑了可能维护性和应用本身的复杂性,采用了HTML5 + JQuery Mobile的文案. 记录一下遇到的两个问题. 1)为了在手机上运行的更快,canvas中底图决定调用 putImageData 来复制,但在android 2.3系统上,canvas 的 putImageData 有很严重的锯齿,canvas.translate(0.5, 0.5)也是没有效果.如下图,前面是正常画出的底图,后面是 putImageData 后的底图. 解决办法, if (android 2

html5 canvas 详细使用教程

导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合setInterval制作动画 结语.demo下载   前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.

Canvas API

概述 绘图方法 图像处理方法 drawImage方法 getImageData方法,putImageData方法 toDataURL方法 save方法,restore方法 像素处理 灰度效果 复古效果 红色蒙版效果 亮度效果 反转效果 参考链接 概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 使用前,首先需要新建一个canvas网页元素. <canvas id="myCanvas"

HTML5 Canvas ( 创建图形对象 ) createImageData

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">

canvas的api

Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap).使用前,首先需要新建一个canvas网页元素. 1 2 3 4 <canvas height="200" id="myCanvas" width="400">     您的浏览器不支持canvas! </canvas> <!-- 如果浏览器不支持这个API,则就会显示canva

《JAVASCRIPT高级程序设计》Canvas绘图-2D上下文

Canvas是HTML5添加的新元素,这个元素负责在页面中设定一个区域,然后通过JavaScript动态的在这个区域绘制图形.<canvas>由几组API组成,除了具备基本绘图能力的2D上下文,<canvas>还建议了一个名为WebGL的3D上下文,目前,支持该元素的浏览器都支持2D上下文,但对WebGL的支持还不够好.以下仅介绍2D上下文. 一.2D上下文 1.进行填充和描边 2D上下文的两种基本绘图操作是填充和描边:填充,是指的用指定的样式填充图形:描边,就是只在图像边缘划线.

How to create water Ripple effect using HTML5 canvas

https://www.script-tutorials.com/how-to-create-water-drops-effect-using-html5-canvas/ https://www.script-tutorials.com/demos/97/index.html Rain & Water Effects(只在谷歌浏览器有效) http://tympanus.net/Development/RainEffect/#slide-1 示例(http://tympanus.net/Deve