★精品文档★
HTML5 Canvas实现图片缩放、翻转、颜色
渐变代码示例
这篇文章主要介绍了 HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例,充分利用到了坐标的操作,说明都写在代码注释里了很简明,需要的朋友可以参考下
翻转、移动、平移、放大、缩小
XML/HTML Codevar canvas = document.getElementById(‘canvas’); if (canvas.getContext) {
var context = canvas.getContext(‘2d’);
//放大与缩小
context.beginPath();
context.strokeStyle = “#000000”;
context.strokeRect(10,10,150,100);
//放大3倍
context.scale(3,3);
context.beginPath();
context.strokeStyle = ‘#cccccc’ ;
1/9
★精品文档★
context.strokeRect(10,10,150,100)
//缩小
context.scale(0.5,0.5);
context.beginPath();
context.strokeStyle = ‘#cccccc’ ;
context.strokeRect(10,10,150,100)
//翻转
var img=new Image();
img.src=‘ images/1 .jpg’ ;
img.onload=function(){
context.drawImage(img,10,10);
context.scale(1 , -1);
context.drawImage(img,0, -500);
}
//平移
2/9
★精品文档★
context.beginPath();
context.strokeStyle = ‘#000000’ ;
context.strokeRect(10,101 ,150,100);
// x移动 50 y移动 100
context.translate(50,100);
context.beginPath();
context.strokeStyle = ‘#cccccc’ ;
context.strokeRect(10,10,150,100);
//旋转
context.beginPath();
context.strokeStyle = ‘#000000’ ;
context.strokeRect(200,50,100,50);
//默认旋转是根据0,0 中心使用translate可以按照自己的设置的中心旋转
context.translate(250,75);
3/9
★精品文档★
context.rotate(45 * Math.PI /180);
context.translate(-250, -75);
context.beginPath();
context.strokeStyle = ‘#cccccc’ ;
context.strokeRect(200,50,100,50);
// transform矩阵
context.beginPath();
context.strokeStyle = ‘#000000’ ;
context.strokeRect(10,10,150,100);
context.transform(3,0,0,3,0,0);
context.beginPath();
context.strokeStyle = ‘#cccccc’ ;
context.strokeRect(10,10,150,100);
4/9
★精品文档★
}
渐变、 图像组合效果、颜色翻转
XML/HTML Codevar canvas = document.getElementById(‘canvas’); if (canvas.getContext) {
var context = canvas.getContext(‘2d’);
//线性绘制渐变
var grd =context.createLinearGrad ient(0,0,200,100);
// postion必须是0.1-1 .0之间的竖直表示渐变中颜色的地点相对地位 color表示颜色
grd.addColorStop(0.1 , “#00ff00”);
grd.addColorStop(0.8, “#ff0000”);
context.fi l lStyle=grd;
context.fi l lRect(0,0, 200,100);
//径向渐变
5/9
★精品文档★
var grd =context.createRadialGradient(100,100,10,100,100,50);
grd.addColorStop(0.1 , “#00ff00”);
grd.addColorStop(0.8, ‘#ff0000’);
context.fi l lStyle=grd;
context.fi l lRect(0,0,200,200);
//图像组合效果
context.fi l lStyle = ‘#00ff00’ ;
context.fi l lRect(10,10,50,50);
//新绘图
//context.globalCompositeOperation =“source-over”;
//只绘制新内容删除其他所有内容
6/9
★精品文档★
context.globalCompositeOperation = ‘copy’ ;
//图形重叠的地方其颜色值相减后决定
context.globalCompositeOperation = ‘darker’ ;
//画布上已经有的内容只会载和其他图形重叠的地方保留
context.globalCompositeOperation =‘destination-atop’ ;
// 参 考http://www.w3school .com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp
context.beginPath();
context.fi l lStyle = ‘#ff0000’ ;
context.arc(50,50,30,0, 2 *Math.PI);
context.fi l l();
7/9
★精品文档★
//颜色翻转
var img = new Image();
img.src = ‘ images/1 .jpg’ ;
img.onload =function(){
context.drawImage(img,0,0, 1 , 1);
var imgData =context.getImageData(0,0, 1 ,1);
var pixels =imgData.data;
console. log(pixels);
for(var i=0, n =pixels. length; i< n; i+=4) {
pixels[i]=255-pixels[i];
pixels[i+1]=255-pixels[i+1];
8/9
★精品文档★
pixels[i+2]=255-pixels[i+2];
}
context.putImageData(imgData, 250, 0);
}
}
9/9
vollcloud LLC创立于2020年,是一家以互联网基础业务服务为主的 技术型企业,运营全球数据中心业务。致力于全球服务器租用、托管及云计算、DDOS安 全防护、数据实时存储、 高防服务器加速、域名、智能高防服务器、网络安全服务解决方案等领域的智 能化、规范化的体验服务。所有购买年付产品免费更换香港原生IP(支持解锁奈飞),商家承诺,支持3天内无条件退款(原路退回)!点击进入:vollclo...
硅云怎么样?硅云是一家专业的云服务商,硅云的主营产品包括域名和服务器,其中香港云服务器、香港云虚拟主机是非常受欢迎的产品。硅云香港可用区接入了中国电信CN2 GIA、中国联通直连、中国移动直连、HGC、NTT、COGENT、PCCW在内的数十家优质的全球顶级运营商,是为数不多的多线香港云服务商之一。目前,硅云香港云服务器,CN2+BGP线路,1核1G香港云主机仅188元/年起,域名无需备案,支持个...
buyvm正式对外开卖第四个数据中心“迈阿密”的块存储服务,和前面拉斯维加斯、纽约、卢森堡一样,依旧是每256G硬盘仅需1.25美元/月,最大支持10T硬盘。配合buyvm自己的VPS,1Gbps带宽、不限流量,在vps上挂载块存储之后就可以用来做数据备份、文件下载、刷BT等一系列工作。官方网站:https://buyvm.net支持信用卡、PayPal、支付宝付款,支付宝付款用的是加元汇率,貌似...