本文主要包含Canvas,HTML5等相关知识,常思过 希望在学习及工作中可以帮助到您
翻转、移动、平移、放大、缩小
- 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);
- }
渐变、图像组合效果、颜色翻转