-
http://www.imooc.com/video/9301查看全部
-
灰度计算方法 r*0.3 + g*0.59 + b*0.11查看全部
-
s -- 图像源文件 d -- 画布查看全部
-
html中添加划竿控件 <input type="range" name="hg" min="0.5" max="3.0"step="0.01" value="1.0" value="" /> min="0.5" 最小缩放为原大小的0.5 max="3.0" 最大缩放原来的三倍 step="0.01"步数0.01 value="1.0" 初值大小为原来的大小 将剪裁的图片完全显示在canvas画布中 var dx=canvas.width/2-imageWidth/2; var dy=canvas.height/2-imageHeight/2; context.drawImage(image,dx,dy,imageWidth,imageHeight)查看全部
-
context.drawImage(image,300,100,200,200,100,100,canvas.width,canvas.height) 铺满canvas画布查看全部
-
第一步 html中创建canvas 第二步 js中获取canvas对象 第三步 js中获取2d属性 var context=canvas.getContext("2d"); 第四步 设置canvas参数 canvas.width=2252; canvas.height=968; context.fillStyle='red'; context.fillRect(100,100,400,400);//横坐标 纵坐标 宽 高 context.drawImage(image,100,30)放置图像位置 距左100px 距上30px查看全部
-
draImage查看全部
-
e.preventDefault();禁用鼠标默认事件查看全部
-
截图查看全部
-
1、如果图片超出canvas 他会自动裁剪掉多余部分 2. var imageWidth=1152*scale; var imageHeight=768*scale; var sx=imageWidth/2-canvas.Width/2; var sh=imageHeight/2-canvas.Height/2; context.drawImage(image,sx,sy,canvas.width,canvas.height,0,0,canvas.width,canvas.height); //可以放大显示 缺点缩小后sx和sh为负数 找不到原图的图片位置而无法准确显示 所以修改为: var dx=canvas.Width/2-imageWidth/2; var dy=canvas.Height/2-imageHeight/2; context.drawImage(image,dx,dy,imageWidth,imageHeihgt); 用这个来规定图片的大小 语法: 在画布上定位图像: context.drawImage(img,x,y); JavaScript 语法 2 在画布上定位图像,并规定图像的宽度和高度: context.drawImage(img,x,y,width,height); JavaScript 语法 3 剪切图像,并在画布上定位被剪切的部分: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);查看全部
-
imageData.data查看全部
-
drawImage查看全部
-
drawImage函数的三种调用方法查看全部
-
9参数对比 1》image对象 2-5》图像坐标,图像宽高 6-9》画布坐标,画布宽高查看全部
-
获取canvas的模态盒子查看全部
举报
0/150
提交
取消