zoukankan html css js c++ java

h5-6 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>
<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>

查看全文

相关阅读:
ModbusRTU模式和结束符(转)
modbus字符串的结束符介绍
 IAR平台移植TI OSAL到STC8A8K64S4A12单片机中
 实时系统概念
 单片机的存储区范例
 如何实现返回上一个页面，就像点击浏览器的返回按钮一般
 spring项目中的定时任务实现和问题解决
 context-param与init-param的区别与作用
 Chapter 1 First Sight——16
一个好用简单的布局空间EasyUI

原文地址：https://www.cnblogs.com/yaowen/p/5358934.html