培训课程网站,宜宾建设网站,wordpress在线浏览pdf,潍坊哪家网站制作公司好canvas有三种用法
三参数
context.drawImage(img,x,y)img: 要使用的图像、画布、视频 x#xff1a;在画布上放置图像的x坐标 y#xff1a;在画布上放置图像的y坐标
例子 HTML:
!DOCTYPE html
html langen
headmeta charset在画布上放置图像的x坐标 y在画布上放置图像的y坐标
例子 HTML:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/head
bodyimg idpicture src./cloud.png alttest /canvas idcanvas styleborder:1px solid #aaa; display:block; margin:50px/canvasscriptwindow.onload function() {var canvas document.getElementById(canvas);canvas.width 400;canvas.height 400;var context canvas.getContext(2d)var pic document.getElementById(picture)context.drawImage(pic,0,0)//context.drawImage(pic,20,0) 下图展示//context.drawImage(pic,100,0) 下图展示}/script
/body
/html参数中的xy只会控制图像在canvas中开始画的位置
五参数 可以进行图片缩放
context.drawImage(img,x,y,width,height);img: 要使用的图像、画布、视频 x在画布上放置图像的x坐标 y在画布上放置图像的y坐标 width在canvas里画出的图像的宽可以理解为缩放 height在canvas里画出的图像的高可以理解为缩放
可以实现一些缩放的需求
在代码中这样写
context.drawImage(pic,0,0,100,100)//会使图像缩成一个100*100九参数 可以进行图片裁剪缩放
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);这个方法用一句话总结就是先裁剪再缩放 在一个图上sxsy位置开始裁剪出一个宽为swidth高为sheight的图然后按照width*height的尺寸进行缩放在canvas的xy位置开始画出来 img: 要使用的图像、画布、视频 sx在原图上开始裁剪的x坐标位置 sy在原图上开始裁剪的y坐标位置 swidth要从原图上裁出的宽度 sheight要从原图上裁出的高度 x在画布上放置图像的x坐标 y在画布上放置图像的y坐标 width在canvas里画出的图像的宽可以理解为缩放 height在canvas里画出的图像的高可以理解为缩放
在代码中这样写
context.drawImage(pic,0,0,172,314,0,0,86,157)可以看出图像是在原图的00位置裁剪出172314的图然后将这个裁剪好的图画在canvas的00位置缩放成86157的尺寸
也就是 先裁剪再缩放
代码这样写也就是按照172*314进行裁剪按照原尺寸画出来没有缩放
context.drawImage(pic,0,0,172,314,0,0,172,314)
