在canvas画布中如何加载图片

<script>

      var Person = function(canvas){

        thisctx = documentquerySelector("canvas")getContext("2d");

        thiscanvasWidth = thisctxcanvaswidth;

        thiscanvasHeight = thisctxcanvasheight;

        thissrc = "image/04png";

        thisinit();

      }

      Personprototypeinit = function(){

        var that = this;

        thisloadImage(function(image){

          // 获取的宽高

          thatimageWidth = imagewidth;

          thatimageHeight = imageheight;

          // 获取单个小怪兽区域的宽高

          thatpositionWidth = thatimageWidth / 4;

          thatpositionHeight = thatimageHeight / 4;

          // 默认是从左上角显示的

          thatx0 = thatcanvasWidth / 2 - thatpositionWidth / 2;

          thaty0 = thatcanvasHeight / 2 - thatpositionHeight / 2;

          // 绘制

          thatctxdrawImage(image, 0, 0, thatpositionWidth, thatpositionHeight, thatx0,

            thaty0, thatpositionWidth, thatpositionHeight);

        })

      }

      PersonprototypeloadImage = function(callback){

        var image = new Image();

        // 加载完成后执行

        imageonload = function(){

          callback && callback(image);

        }

        imagesrc = thissrc;

      }

      var person = new Person();

    </script>

三、绘制小人行走的帧动画

<s<script>

        var Person = function(canvas){

          thisctx = documentquerySelector("canvas")getContext("2d");

          thiscanvasWidth = thisctxcanvaswidth;

          thiscanvasHeight = thisctxcanvasheight;

          thissrc = "image/04png";

          thisinit();

        }

        Personprototypeinit = function(){

          var that = this;

          thisloadImage(function(image){

            // 获取的宽高

            thatimageWidth = imagewidth;

            thatimageHeight = imageheight;

            // 获取单个小怪兽区域的宽高

            thatpositionWidth = thatimageWidth / 4;

            thatpositionHeight = thatimageHeight / 4;

            // 默认是从左上角显示的

            thatx0 = thatcanvasWidth / 2 - thatpositionWidth / 2;

            thaty0 = thatcanvasHeight / 2 - thatpositionHeight / 2;

            // 绘制

            thatctxdrawImage(image, 0, 0, thatpositionWidth, thatpositionHeight, thatx0,

              thaty0, thatpositionWidth, thatpositionHeight);

            var index = 0;

            setInterval(function(){

              thatctxclearRect(0, 0, thatcanvasWidth, thatcanvasHeight);

              index++;

              thatctxdrawImage(image, index thatpositionWidth, 0, thatpositionWidth, thatpositionHeight, thatx0, thaty0,<br> thatpositionWidth, thatpositionHeight);

              if(index >= 3){

                index = 0;

              }

            }, 100);

          })

        }

        PersonprototypeloadImage = function(callback){

          var image = new Image();

          // 加载完成后执行

          imageonload = function(){

            callback && callback(image);

          }

          imagesrc = thissrc;

        }

        var person = new Person();

      </script>

四、绘制疾走的小怪兽

可以通过键盘上下左右键控制小人在画布中任意行走

nction(canvas){

        thisctx = documentquerySelector("canvas")getContext("2d");

        thiscanvasWidth = thisctxcanvaswidth;

        thiscanvasHeight = thisctxcanvasheight;

        thisstepX = 0;

        thisstepY = 0;

        thisstepSize = 10;

        thisindex = 0;

        thisdirection = 0;

        thissrc = "image/04png";

        thisinit();

      }

      Personprototypeinit = function(){

        var that = this;

        thisloadImage(function(image){

          // 获取的宽高

          thatimageWidth = imagewidth;

          thatimageHeight = imageheight;

          // 获取单个小怪兽区域的宽高

          thatpositionWidth = thatimageWidth / 4;

          thatpositionHeight = thatimageHeight / 4;

          // 默认是从左上角显示的

          thatx0 = thatcanvasWidth / 2 - thatpositionWidth / 2;

          thaty0 = thatcanvasHeight / 2 - thatpositionHeight / 2;

          // 绘制

          thatctxdrawImage(image, 0, 0, thatpositionWidth, thatpositionHeight, thatx0,

            thaty0, thatpositionWidth, thatpositionHeight);

          var index = 0;

          documentonkeydown = function(e){

            thatctxclearRect(0, 0, thatcanvasWidth, thatcanvasHeight);

            switch(ekeyCode){

              case 37 :

                consolelog('左');

                thatdirection = 1;

                thatstepX--;

                thatshowImage(image);

                break;

              case 38 :

                consolelog('上');

                thatdirection = 3;

                thatstepY--;

                thatshowImage(image);

                break;

              case 39 :

                consolelog('右');

                thatdirection = 2;

                thatstepX++;

                thatshowImage(image);

                break;

              case 40 :

                consolelog('下');

                thatdirection = 0;

                thatstepY++;

                thatshowImage(image);

                break;

            }

          }

        })

      }

      PersonprototypeloadImage = function(callback){

        var image = new Image();

        // 加载完成后执行

        imageonload = function(){

          callback && callback(image);

        }

        imagesrc = thissrc;

      }

      PersonprototypeshowImage = function(image){

        thisindex++;

        consolelog(thisindex);

          thisctxdrawImage(image, thisindex thispositionWidth, thisdirection thispositionHeight, thispositionWidth, thispositionHeight, thisx0 + thisstepX thisstepSize, thisy0 + thisstepY thisstepSize, thispositionWidth, thispositionHeight);

          if(thisindex >= 3){

            thisindex = 0;

          }

      }

      var person = new Person();

    </script>

深圳网站建设>

使用HTML5画布canvas能够快速实现简单的动画效果，基本原理如下：

每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用contextclearRect(0, 0, x, y)方法来刷新需要绘制的图形

首先是绘制图形的方法，如下：

function myAnimation() {

ctxclearRect(0, 0, canvas_size_x, canvas_size_y);

if (x_icon < 0 || x_icon > canvas_size_x - size_x) {

stepX = -stepX;

}

if (y_icon < 0 || y_icon > canvas_size_y - size_y) {

stepY = -stepY;

}

x_icon += stepX;

y_icon += stepY;

ctxdrawImage(anim_img, x_icon, y_icon);

}

以上方法每隔一定时间清除画布内容，并且重新计算绘制图形位置，一旦超过了画布大小，则反转坐标绘制图形。

            图像元素：img

            视频元素 video 

            canvas: canvas

drawImage(） *** 作方式：

             绘图+位移：drawImage(image，x，y）

            绘图+位移+缩放：drawImage(image，x，y ，width , height)

            绘图+裁切+位移+缩放：drawImage(image，x1，y 1，w1 , h1，x2 , y2 , w2 , h2)

drawImage(）作用：

             把现有绘制到canvas中去

             便于以后通过canvas获取的像素集合

JS Canvas与Image互相转换

原文演示: JavaScript Canvas Image Conversion Demo

在上周的Mozilla Web开发 会议,最后我们花了大半天的时间讨论未来的Mozilla市场应用。Instagram是近期最火爆的移动应用,以10亿美元的天价卖给了FaceBook。

我不介意赚取一些外快,所以我决定创建一个Instagram样式的应用(以后将会分享出来)

本文向您展示怎样转换Image为canvas，以及canvas如何提取出一个Image。

转换 Image为 Canvas

要把转换为Canvas(画板，画布),可以使用canvas元素 context 的drawImage方法：

复制代码

代码如下:

// 把image 转换为 canvas对象

function convertImageToCanvas(image) {

// 创建canvas DOM元素，并设置其宽高和一样

var canvas = documentcreateElement("canvas");

canvaswidth = imagewidth;

canvasheight = imageheight;

// 坐标(0,0) 表示从此处开始绘制，相当于偏移。

canvasgetContext("2d")drawImage(image, 0, 0);

return canvas;

}

转换 Canvas 为 Image

假设图像已经在canvas上处理好，那么可以使用以下方法，把canvas转变为Image对象。

复制代码

代码如下:

// 从 canvas 提取 image

function convertCanvasToImage(canvas) {

//新Image对象，可以理解为DOM

var image = new Image();

// canvastoDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持

// 指定格式 PNG

imagesrc = canvastoDataURL("image/png");

return image;

}

canvas指纹的技术原理：

canvas是一种在网页上绘制2D和动画的技术。

通过html5的canvas接口，在网页上绘制一个隐藏的画布图像。在不同 *** 作系统、不同浏览器上，产生的内容不完全相同（我们肉眼是无法区分的）。在格式上，不同浏览器使用了不同的图形处理引擎、不同的导出选项、不同的默认压缩级别等。在像素级别来看， *** 作系统各自使用了不同的设置和算法来进行抗锯齿和子像素渲染 *** 作。即使相同的绘图 *** 作，产生的数据的CRC检验也不相同。

计算机程序通过计算这张数据的哈希值，能够识别不同硬件设备渲染结果的细微区别。通过这种方式，技术上就能够通过计算用户设备的canvas指纹来标识用户。

值得注意的是，如果用户的设备， *** 作系统，浏览器都一样的话，计算出来的canvas指纹是一样的。换句话说：canvas指纹不具备唯一性，要和其他的浏览器指纹相互结合利用来进一步计算出区分度更高的指纹标识。

如何检测canvas指纹？

在线检测地址： >

绘制，要求必须在加载完成之后。

drawImage(img,x,y) 有多大绘制多大；

drawImage(img,x,y,iw,ih) 将绘制到指定大小内，会压缩或拉伸；

drawImage(img,ix,iy,iw,ih,cx,cy,cw,ch) 前4个参数决定从原图上指定位置剪下指定大小的图，绘制到指定位置的画布上的指定大小，会压缩或拉伸。

getImageData(x,y,w,h) 获取指定范围内的像素信息

putImageData(imgData,x,y) 向指定范围内绘制像素信息

clip() 裁剪：

我么可以使用给定的方法，完成的一些 滤镜效果 。

arr[i]=arr[i+1]=arr[i+2]=(arr[i]+arr[i+1]+arr[i+2])/3;

createPattern(img,repeatType) 创建平铺对象

repeatType:平铺类型 repeat-x repeat-y repeat no-repeat

canvas转换api不相同，并且参数不相同，支付宝参数与支付宝开发者文档中的参数都出现不相同

下面我们看微信的wxcanvasToTempFilePath和支付宝ctxtoTempFilePath中success返回的参数差异,我们如果要获取对应的，wx返回两种格式，一种是本地，一种是>

以上就是关于在canvas画布中如何加载图片全部的内容，包括:在canvas画布中如何加载图片、《JS原理、方法与实践》- canvas动画、HTML5用canvas怎么实现动画效果等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！