HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例

翻转、移动、平移、放大、缩小

			XML/HTML Code复制内容到剪贴板
								var 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';   
					    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);   
					    }   
					    // 平移   
					    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);   
					       
					    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);   
					        
					}  
		

渐变、图像组合效果、颜色翻转

			XML/HTML Code复制内容到剪贴板

上一篇：HTML5实现动画效果的方式汇总

下一篇：HTML5中meta属性的使用方法

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注