html5 canvas图像-图像的缩放
2014-05-15 15:29
211 查看
当用户选中复选框之后,应用程序则会重新绘制该图,将其放大,以符合canvas的尺寸。
如果用户选中了复选框,那么该函数就会再绘制时将图像缩放至于canvas相同的大小。否则,它就直接绘制未经缩放的对象。在这种情况下,函数都会把图像绘制在canvas的(0,0)坐标处。
<html> <head> <title>Scaling Images</title> <style> body { background: rgba(100, 145, 250, 0.3); } #canvas { margin-left: 20px; margin-right: 0; margin-bottom: 20px; border: thin solid #aaaaaa; cursor: crosshair; } #controls { margin: 15px; padding: 0; } </style> </head> <body> <div id='controls'> <input id='scaleCheckbox' type='checkbox'/> Scale image to canvas </div> <canvas id='canvas' width='900' height='620'> Canvas not supported </canvas> <script src='example.js'></script> </body> </html>
var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), image = new Image(), scaleCheckbox = document.getElementById('scaleCheckbox'); // Functions..................................................... function drawImage() { context.clearRect(0,0,canvas.width,canvas.height); if (scaleCheckbox.checked) { context.drawImage(image, 0, 0, canvas.width, canvas.height); } else { context.drawImage(image, 0, 0); } context.restore(); } // Event Handlers................................................ scaleCheckbox.onchange = function(e) { drawImage(); } // Initialization................................................ image.src = '../../shared/images/waterfall.png'; image.onload = function(e) { drawImage(); };
如果用户选中了复选框,那么该函数就会再绘制时将图像缩放至于canvas相同的大小。否则,它就直接绘制未经缩放的对象。在这种情况下,函数都会把图像绘制在canvas的(0,0)坐标处。
相关文章推荐
- html5 canvas 图像转换与缩放
- HTML5 Canvas图像缩放
- html5学习笔记三:canvas中平移,缩放,旋转等图像变换问题
- html5之Canvas(基础用法,转换矩阵,图像混合)
- 怎样将html5中利用canvas绘制的图像在服务端保存为图片?
- html5 canvas 图像处理
- html5 canvas画不出图像的原因
- html5 canvas 图像处理
- HTML5中canvas知识点详解7-使用图像
- HTML5之Canvas 2D入门1 - Canvas绘制文本和图像
- HTML5之7 __Canvas: 缩放、旋转、创建阴影
- html5 canvas画不出图像的原因
- HTML5中canvas知识点详解6-给图像绘制阴影
- HTML5 Canvas drawImage图像绘制
- HTML5之Canvas绘图——Canvas画布调整之移动、缩放、旋转
- html5 canvas图片缩放,拖拽
- HTML5 canvas标签的全屏、退出全屏,canvas中显示的缩放、移动,小坑盘点
- HTML5标签canvas图像处理
- Canvas缩放图像
- PHP中的HTML5应用 将Canvas图像保存到服务器