绘制图像：drawImage()
获取图像数据：getImageData()
重写图像数据：putImageData()
导出图像：toDataURL()
顾名思义，该方法就是用于将图像绘制于Canvas画布当中，具体用法有三种：
① 在画布上定位图像：
contextdrawImage(img,x,y)
② 在画布上定位图像，并规定图像的宽度和高度（缩放）：
contextdrawImage(img,x,y,width,height)
③ 剪切图像，并在画布上定位被剪切的部分：
contextdrawImage(img,sx,sy,swidth,sheight,x,y,width,height)
效果：
createPattern() 方法在指定的方向内重复指定的元素。元素可以是、视频，或者其他 <canvas> 元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。
效果：
使用图形上下文不带参数的clip()方法来实现Canvas图形裁切功能，该方法会使用先创建好的路径对canvas设置裁剪区域，裁剪指定区域显示内容。裁剪是对画布进行的，裁剪后的画布是不能恢复到原来的大小，因此使用save及restore。
效果：
我们可以直接从HTML5 canvas中获取单个像素。通过ImageData对象我们可以以读写一个数据数组的方式来 *** 纵像素数据。当完成像素 *** 作之后，如果要显示它们，需要将这些像素复制到canvas上。
ImageData对象代表canvas中某个区域的底层像素数据。它包含三个只读的属性：
width：图像的宽度，单位像素。
height：图像的高度，单位像素。
data：包含像素值的一维数组。
在data数组中的每一个像素包含4个字节的值。也就是说每一个像素由4个字节表示，每一个字节分别表示红色，绿色，蓝色和一个透明度alpha通道（RGBA）。
putImageData()函数将它们复制到canvas上。putImageData()函数有两种格式。第一种格式是复制所有的像素到canvas中。canvasX和canvasY参数是canvas上插入像素的x和y坐标。
sx和sy参数（sourceX 和 sourceY）是矩形左上角的x和y坐标。
sWidth和sHeight参数（sourceWidth 和 sourceHeight）是矩形的宽度和高度。
我们也可以从canvas上获取一个矩形区域的像素到一个ImageData对象中。通过getImageData函数可以完成这个 *** 作。
x和y参数是从canvas上获取的矩形的左上角的坐标。
width和height参数是从canvas上获取的矩形的宽度和高度。
我们可以在HTML5 canvas上绘制绘制文字，并且可以设置文字的字体，大小和颜色。
绘制文字的字体由font属性来控制。如果你需要使用颜色来填充文字或制作描边文字，可以使用fillStyle和strokeStyle属性来完成。
要在canvas上绘制文字，可以通过的fillText()函数或strokeText()函数来完成。
表示在(x,y)的位置，绘制text的内容。可选参数maxWidth为文本的最大宽度，单位为像素。如果设置了该属性，当文本内容宽度超过该参数值，则会自动按比例缩小字体，使文本的内容全部可见；未超过时，则以实际宽度显示。如果未设置该属性，当文本内容宽度超过画布宽度时，超出的内容将被隐藏。
效果：
先把3d动画导出为视频格式。再用插件activex
-----------
你可以用dreamweaver中的插入ActiveX插件功能播放wmv、avi、mpg等格式的视频。方法：
1。常用面板中插入一个ActiveX插件，并调整大小
2。选中ActiveX插件，在属性面板中的classid中输入如下代码（注意大小写！一个也不能错！）
3单击“参数“在参数项下填写：filename(原样输入)，在值项下输入文件名，如：moviewmv（此视频存放在根木录下)
要使用 canvas 绘图，需要现在HTML中定义一个画布。
canvas 元素本身没有绘图能力。所有的绘制工作必须在 JavaScript 内部完成。
大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法 获得的一个“绘图环境”对象上。
在闭合路径后，还需要使用 fill() 或 stroke() 方法显示图形。
在闭合路径后，还需要使用 stroke() 方法显示线条。
定义好的渐变，还需要使用 fillRect() 等方法填充图形。
在 canvas 中加载，需要先定义一个 image 对象，然后使用 drawImage() 方法绘制图像。需要注意的是使用 src 引用后，还需要使用 onload 函数加载方法，才能显示。
还可以在 canvas 中加载视频、制作更多图形。
如果想制作 canvas 动画，还需要借助 JavaScript 完成。
canvas 参考手册
你的文件格式是AVI的。avi格式是通用格式一般都是可以播放的但是如果不能播放那就是压缩解码使用了高压缩需要找到响应的解码器来解这样你所有的播放器都可以放的需要安装 DIVX解码器 去下载个安装试试。 不然直接去下载个暴风影音的播放器也行。
本文实例为大家分享了canvas图像截取的具体代码，供大家参考，具体内容如下
<!DOCTYPE
html>
<html>
<head
lang="en">
<meta
charset="UTF-8">
<title>canvas-图像截取</title>
<style>
canvas{
border:
1px
dashed
red;
float:
left;
position:
relative;
}
</style>
</head>
<body>
<div
id="cantox"
style="position:
relative">
<canvas
id="oldcanvas"
width="500px"
height="300px">
</canvas>
<div
id="cliptox"
style="position:
absolute;display:none"></div>
</div>
<button
id
="btnclip"
style="float:
left">截取该区域</button>
<canvas
id="nowcanvas"
width="500px"
height="300px"
>
</canvas>
<script>
//获取div元素
var
cantox
=
documentgetElementById("cantox");
var
cliptox
=
documentgetElementById("cliptox");
var
btnclip
=
documentgetElementById("btnclip");
//获取到canvas元素
var
oldcanvas
=
documentgetElementById("oldcanvas");
var
nowcanvas
=
documentgetElementById("nowcanvas");
//获取canvas中的画图环境
var
oldcontext
=
oldcanvasgetContext('2d');
var
nowcontext
=
nowcanvasgetContext('2d');
var
img
=
new
Image();
imgsrc
=
"/image/liuyifeijpg";
//加载图像到canvas画布中
windowonload
=
function
(){
oldcontextdrawImage(img,0,0,oldcanvaswidth,oldcanvasheight);
}
var
startPoint;//截取图像开始坐标
var
endPoint;//截图图像的结束坐标
var
w;
//截取图像的宽度
var
h;
//截取图像的高度
var
flag
=
false;
//用于判断移动事件事物控制
//鼠标按下事件
cantoxonmousedown
=
function
(e){
flag
=
true;
cliptoxstyledisplay
=
'block';
startPoint
=
windowToCanvas(oldcanvas,
eclientX,
eclientY);
cliptoxstyleleft
=
startPointx+'px';
cliptoxstyletop
=
startPointy+'px';
}
//鼠标移动事件
cantoxonmousemove
=
function
(e){
if(flag){
cliptoxstylebackground
=
'rgba(0,0,0,05)';
endPoint
=
windowToCanvas(oldcanvas,
eclientX,
eclientY);
w
=
endPointx
-
startPointx;
h
=
endPointy
-
startPointy;
cliptoxstylewidth
=
w
+'px';
cliptoxstyleheight
=
h+'px';
}
}
//鼠标释放事件
cantoxonmouseup
=
function
(e){
flag
=
false;
}
//按钮截取事件
btncliponclick
=
function
(){
imgCut(nowcontext,img,oldcanvaswidth,oldcanvasheight,startPointx,startPointy,w,h);
}
/
图像截取函数
context:绘制环境对象
image：图像对象
imgElementW：图像显示的宽度
imgElementH：图像显示的高度
sx:截取图像的开始X坐标
sy:截取图像的开始Y坐标
w:截取图像的宽度
h:截取图像的高度
/
function
imgCut(context,image,imgElementW,imgElementH,sx,sy,w,h){
//清理画布，便于重新绘制
contextclearRect(0,0,imgElementW,imgElementH);
//计算
：比例
=
原图像/显示图像
var
ratioW
=
imagewidth/imgElementW;
var
ratioH
=
imageheight/imgElementH;
//根据截取图像的所占位置及大小计算出在原图所占的位置及大小
//drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度，
//
绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);
contextdrawImage(image,ratioWsx,ratioHsy,ratioWw,ratioHh,0,0,w,h);
}
/
坐标转换：将window中的坐标转换到元素盒子中的坐标，并返回(x,y)坐标
element：canvas元素对象
x:鼠标在当前窗口X坐标值
y:鼠标在当前窗口Y坐标值
/
function
windowToCanvas(element,x,y){
//获取当前鼠标在window中的坐标值
//
alert(eventclientX+"-------"+eventclientY);
//获取元素的坐标属性
var
box
=
elementgetBoundingClientRect();
var
bx
=
x
-
boxleft;
var
by
=
y
-
boxtop;
return
{x:bx,y:by};
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
1、获取canvas调用
var c = documentcreateElement('canvas');
context = cgetContext('2d');
2、获取导入图像信息
var hiddenImage = new Image();
hiddenImagesrc=地址
context drawImage(hiddenImage, 0, 0, width, height);
hiddenImage onload=function(){
contextputImageData(hiddenImage, 0, 0);
}
3、获取的像素信息
var imageData = contextgetImageData(0, 0, w, h);
//注意这个获取的是数组，注意每1个像素由数组的4个元素组成，四个元素分别代码四个通道r/g/b/a的值
for(var j=0;j<hiddenImageheight;j+=1){
for(var i=0;i<hiddenImagewidth;i+=1){
//注意这里获取信息后可以进行定制化处理
offset=4(hiddenImagewidthj+i);
var red = sourceImageData[offset];
var green = sourceImageData[offset + 1];
var blue = sourceImageData[offset + 2];
var brightness = getBrightness(red,green,b
canvas本身没有绘画能力，它的绘制工作必须在JavaScript的内部完成。
getContext()：getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。所以获取绘图环境是通过调试canvas对象的getContext()方法。
bmpcanvascopyrect(bmpcanvascliprect,imagecanvas,imagecanvascliprect);
bmpAssign(Image1PictureGraphic );
以上就是关于canvas使用图像(绘制图、图像平铺、图像剪裁、像素处理、绘制文字)全部的内容，包括:canvas使用图像(绘制图、图像平铺、图像剪裁、像素处理、绘制文字)、如何用HTML5的Canvas制作3D动画效果、使用 canvas 绘图的几种方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）