html5 canvas 绘制图像、画布或视频
2014-07-15 17:34
543 查看
canvas绘制图形、画布或者视频
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。
语法如下:
语法一:在画布上定位图像
context.drawImage(img,x,y);
语法二:在画布上定位图像,并规定图像的宽度和高度:
context.drawImage(img,x,y,width,height);
语法三:剪切图像,并在画布上定位被剪切的部分:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数说明如下:
img:规定要使用的图像、画布或者视频;
sx:可选,开始剪切的x坐标位置。
sy:可选,开始剪切的y坐标位置
swidth:可选,被剪切图像的宽带
sheight:可选,被剪切图像的高度
x:在画布上放置图像的x坐标位置
y:在画布上放置图像的y坐标位置
width:可选,要使用的图像的宽度,
height:可选,要使用的图像的高度。
示例代码:
效果如下:
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。
语法如下:
语法一:在画布上定位图像
context.drawImage(img,x,y);
语法二:在画布上定位图像,并规定图像的宽度和高度:
context.drawImage(img,x,y,width,height);
语法三:剪切图像,并在画布上定位被剪切的部分:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数说明如下:
img:规定要使用的图像、画布或者视频;
sx:可选,开始剪切的x坐标位置。
sy:可选,开始剪切的y坐标位置
swidth:可选,被剪切图像的宽带
sheight:可选,被剪切图像的高度
x:在画布上放置图像的x坐标位置
y:在画布上放置图像的y坐标位置
width:可选,要使用的图像的宽度,
height:可选,要使用的图像的高度。
示例代码:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="script/jquery-2.1.0.js"></script> <script type="text/javascript"> $(function () { var img = document.getElementById("img"); var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.drawImage(img, 0, 0); context.drawImage(img, 560, 0, 300, 300); context.drawImage(img, 0, 0, 400, 300, 0, 330, 200, 200); }); </script> </head> <body> <img src="images/1234.jpg" id="img"/> <canvas id="canvas" width="1200" height="550" ></canvas> </body> </html>
效果如下:
相关文章推荐
- HTML5——Canvas画布绘制图像、绘制线型和绘制图片
- 利用HTML5的canvas标签实现灰太狼图像的绘制
- 在canvas上绘制视频图像
- 在canvas上绘制视频图像2
- html5中canvas画布同步video播放器播放图像
- [HTML5]将WebView的视频绘制在Canvas上
- HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制
- HTML5 Canvas drawImage图像绘制
- HTML5利用Canvas绘制图形(使用图像、裁剪区域、使用文本。阴影效果和操作像素)
- HTML5之Canvas 2D入门1 - Canvas绘制文本和图像
- 使用HTML5中的canvas绘制灰太狼图像
- HTML5中canvas知识点详解6-给图像绘制阴影
- 怎样将html5中利用canvas绘制的图像在服务端保存为图片?
- 突袭HTML5之Canvas 2D入门1 - Canvas绘制文本和图像
- HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制
- html5<canvas在画布上画视频和图片>
- 用html5的canvas画布绘制贝塞尔曲线完整代码
- 用html5的canvas画布绘制贝塞尔曲线
- HTML5 Canvas(画布)图像处理
- html5 canvas 标签绘制图像且渐变色处理