首页 > 网站 > WEB开发 > 正文

html5 canvas缩放变换

2024-04-27 14:10:54
字体:
来源:转载
供稿:网友

html5 canvas缩放变换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图像缩放</title><script src="js/modernizr.js"></script></head><body><script type="text/javascript">window.addEventListener('load',eventWindowLoaded,false);function eventWindowLoaded(){    canvasApp();}function canvasSupport(){    return Modernizr.canvas;}function canvasApp(){    if(!canvasSupport()){        return;    }else{        var theCanvas = document.getElementById('canvas')        var context = theCanvas.getContext("2d")    }    drawScreen();    function drawScreen(){                        context.setTransform(1,0,0,1,0,0);        var x = 100;        var y = 100;        var width = 50;        var height = 50;        context.translate(x+.5*width,y+.5*height);        context.scale(2,2);//横,纵        context.fillStyle="red";        context.fillRect(-.5*width,-.5*height,width,height);            }    }</script><canvas id="canvas" width="500" height="500">你的浏览器无法使用canvas小白童鞋;你的支持是我最大的快乐!!</canvas></body></html>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表