备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

h5-7 canvas

2017-11-02 862
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 
<!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>
复制代码

 


本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/5358936.html，如需转载请自行联系原作者

文章标签：
Web App开发
前端开发
范大脚脚
目录
相关文章
咖啡机（K.F.J）
|
移动开发 前端开发 JavaScript
让自己也能使用Canvas
<canvas> 是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。
咖啡机（K.F.J）
275 0
让自己也能使用Canvas
天玄TX
|
18天前
|
XML 移动开发 前端开发
Canvas和SVG：你应该选择哪一个？
Canvas和SVG：你应该选择哪一个？
天玄TX
23 2
_揽
|
4月前
|
移动开发 前端开发 JavaScript
canvas详解00-认识canvas
canvas详解00-认识canvas
_揽
35 1
canvas详解00-认识canvas
前端小枫
|
12月前
|
存储 XML 前端开发
神奇的 Canvas
canvas是为了解决页面只能显示静态图片而出现的一种可以使用JavaScript绘制的HTML标签，它可以接受两个参数width和height（原来有三个，还有一个moz-opaque控制透明度，已经废弃了）
前端小枫
79 0
颜酱
|
前端开发
用canvas画七巧板 -- 练习canvas
用canvas画七巧板 -- 练习canvas
颜酱
92 0
石璞东｜haha
|
移动开发 前端开发 小程序
Canvas 2D详解
Canvas 2D详解
石璞东｜haha
146 0
Canvas 2D详解
游客hpfckdvlcqrea
|
前端开发 数据可视化 定位技术
canvas绘制飞线效果
canvas绘制飞线效果
游客hpfckdvlcqrea
449 0
canvas绘制飞线效果
我是小助手
|
前端开发
canvas-缤纷纸片
第一次用canvas绘图，其实难度是挺大的，基于js和一些数学知识，还有参考了网上很多的例子，最终完成了demo。
我是小助手
1268 0
fbh
|
前端开发 HTML5 移动开发
分享一个canvas代码2
学习HTML5 Canvas这一篇文章就够了 HTML5 Canvas粒子效果文字动画特效DEMO演示 展现地址：http://csdn.
fbh
842 0
fbh
|
Web App开发 前端开发
分享一个canvas代码
首先需要已入jquery 然后直接运行 function project3D(x,y,z,vars){var p,d;x-=vars.
fbh
1020 0