h5-6 canvas

weixin_33816946發表於2016-04-06
H5Canvas
<!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>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
    var oC =document.getElementById('c1');
    var oGC = oC.getContext('2d');
    var yImg = new Image();
    yImg.onload = function(){//圖片載入完事件
        draw(this);
    };
    yImg.src = '2.png';
    function draw(obj){    
        oGC.drawImage(obj,0,0);    
    }
    
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!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>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
    var aInput = document.getElementsByTagName('input');
    var oImg = document.getElementById('img1');
    var yImg = new Image();
    var iNow = 0;
    yImg.onload = function(){
        draw(oImg);
    };
    yImg.src = oImg.src;
    function draw(obj){    
        var oC = document.createElement('canvas');
        var oGC = oC.getContext('2d');    
        oC.width = obj.width;
        oC.height = obj.height;
        obj.parentNode.replaceChild(oC,obj);    
        oGC.drawImage(obj,0,0);    
        aInput[1].onclick = function(){        
            if(iNow==3){
                iNow = 0;
            }
            else{
                iNow++;
            }
            toChange();        
        };
        aInput[0].onclick = function(){        
            if(iNow==0){
                iNow = 3;
            }
            else{
                iNow--;
            }
            toChange();        
        };
        function toChange(){        
            switch(iNow){
                case 1:            
                    oC.width = obj.height;
                    oC.height = obj.width;
                    oGC.rotate(90*Math.PI/180);
                    oGC.drawImage(obj,0,-obj.height);            
                break;            
                case 2:            
                    oC.width = obj.width;
                    oC.height = obj.height;
                    oGC.rotate(180*Math.PI/180);//旋轉
                    oGC.drawImage(obj,-obj.width,-obj.height);//移動圖片的座標
                break;
                case 3:
                    oC.width = obj.height;
                    oC.height = obj.width;
                    oGC.rotate(270*Math.PI/180);
                    oGC.drawImage(obj,-obj.width,0);
                break;
                case 0:
                    oC.width = obj.width;
                    oC.height = obj.height;
                    oGC.rotate(0);
                    oGC.drawImage(obj,0,0);
                break;
            }
        }
    }
};

</script>
</head>

<body>
<input type="button" value="←" />
<input type="button" value="→" />
<div>
    <img src="2.png" id="img1" />
</div>
</body>
</html>
<!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>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
    var oC =document.getElementById('c1');
    var oGC = oC.getContext('2d');
    var yImg = new Image();
    yImg.onload = function(){
        draw(this);//this是yImg物件
    };
    yImg.src = '2.png';
    function draw(obj){    
        var bg = oGC.createPattern(obj,'repeat');    
        oGC.fillStyle = bg;        
        oGC.fillRect(0,0,300,150);        
    }    
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!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>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
    var oC =document.getElementById('c1');
    var oGC = oC.getContext('2d');
    var obj = oGC.createLinearGradient(150,100,250,200);//漸變區域起點座標終點座標
    obj.addColorStop(0,'red');
    obj.addColorStop(0.5,'yellow');
    obj.addColorStop(1,'blue');
    oGC.fillStyle = obj;
    oGC.fillRect(150,100,100,100);    
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!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>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
    var oC =document.getElementById('c1');
    var oGC = oC.getContext('2d');
    
    var obj = oGC.createRadialGradient(200,200,100,200,200,150);
    
    obj.addColorStop(0,'red');
    obj.addColorStop(0.5,'yellow');
    obj.addColorStop(1,'blue');
    
    oGC.fillStyle = obj;
    
    oGC.fillRect(0,0,oC.width,oC.height);
    
    
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!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>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
    var oC =document.getElementById('c1');
    var oGC = oC.getContext('2d');
    oGC.font = '60px impact';
    oGC.textBaseline = 'middle';  //middle bottom
    oGC.fillText('妙味課堂',0,0);
    oGC.strokeText('妙味課堂',0,200);
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!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>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
    var oC =document.getElementById('c1');
    var oGC = oC.getContext('2d');
    oGC.font = '60px impact';
    oGC.textBaseline = 'middle';  //middle bottom
    var w = oGC.measureText('妙味課堂').width;//沒有高度
    oGC.fillText('妙味課堂',(oC.width - w)/2,(oC.height - 60)/2);
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!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>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>

window.onload = function(){
    var oC =document.getElementById('c1');
    var oGC = oC.getContext('2d');
    oGC.font = '60px impact';
    oGC.textBaseline = 'top';  //middle bottom
    oGC.shadowOffsetX = 10;
    oGC.shadowOffsetY = 10;
    oGC.shadowBlur = 3;
    alert(oGC.shadowColor);  //預設顏色：黑色透明
    oGC.shadowColor = 'yellow';
    var w = oGC.measureText('妙味課堂').width;
    oGC.fillText('妙味課堂',(oC.width - w)/2,(oC.height - 60)/2);
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>

 

相關文章