zoukankan      html  css  js  c++  java

  • h5-4 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;}
span{ color:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');//获取canvas元素
    var oGC = oC.getContext('2d');  //绘制环境目前只是2d环境，webgl : 3D绘图
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
    <span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</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;}
span{ color:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.fillRect(50,50,100,100);//填充
    oGC.strokeRect(50.5,50.5,100,100);//不填充，只画边框。
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
    <span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</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;}
span{ color:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.fillStyle = 'red';//填充的颜色
    oGC.strokeStyle = 'blue';//边框的颜色
    oGC.lineWidth = 10;
    oGC.fillRect(50,50,100,100);
    oGC.strokeRect(50.5,50.5,100,100);
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
    <span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</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;}
span{ color:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.fillStyle = 'red';
    oGC.strokeStyle = 'blue';
    oGC.lineWidth = 10;
    oGC.lineJoin = 'bevel';//圆角
    oGC.fillRect(50,50,100,100);
    oGC.strokeRect(50.5,50.5,100,100);
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
    <span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</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;}
span{ color:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.beginPath();
    oGC.moveTo(100,100);
    oGC.lineTo(200,200);
    oGC.lineTo(300,200);
    oGC.closePath();//起点和终点连接起来
    oGC.stroke();//画线：把点连接起来
    
    oGC.beginPath();
    oGC.moveTo(100,200);
    oGC.lineTo(200,300);
    oGC.lineTo(300,300);
    oGC.closePath();
    oGC.fill();//把点之间的位置填充
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
    <span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</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;}
span{ color:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.beginPath();
    oGC.rect(100,100,100,100);//绘制矩形
    oGC.closePath();
    oGC.fill();
    oGC.clearRect(0,0,oC.width,oC.height);  //擦出矩形区域
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
    <span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</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;}
span{ color:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.save();//save()和restore()之间的代码不会影响后面的
    oGC.fillStyle = 'red';
    oGC.beginPath();
    oGC.moveTo(100,100);
    oGC.lineTo(200,200);
    oGC.lineTo(300,200);
    oGC.closePath();
    oGC.fill();
    oGC.restore();
    
    oGC.beginPath();
    oGC.moveTo(100,200);
    oGC.lineTo(200,300);
    oGC.lineTo(300,300);
    oGC.closePath();
    oGC.fill();
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
    <span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</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;}
span{ color:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oGC.lineWidth = 20;
    oGC.lineCap = 'square';//2端点的样式
    oGC.moveTo(100,100);
    oGC.lineTo(200,200);
    oGC.stroke();
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
    <span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</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;}
span{ color:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    oC.onmousedown = function(ev){
        var ev = ev || window.event;
        oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);//鼠标坐标是相对于屏幕的
        document.onmousemove = function(ev){
            var ev = ev || window.event;
            oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
            oGC.stroke();//画线
        };
        document.onmouseup = function(){
            document.onmousemove = null;//取消事件
            document.onmouseup = null;
        };
    };
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
    <span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</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;}
span{ color:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    var num = 0;
    oGC.fillRect(0,0,100,100);
    setInterval(function(){
        num++;
        oGC.clearRect(0,0,oC.width,oC.height);
        oGC.fillRect(num,num,100,100);//矩形区域移动
    },30);
};

</script>
</head>

<body>
<canvas id="c1" width="400" height="400">
    <span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</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; width:300px; height:150px;}
span{ color:white;}
</style>
<script>

window.onload = function(){
    var oC = document.getElementById('c1');
    var oGC = oC.getContext('2d');  
    var num = 0;
    oGC.fillRect(0,0,100,100);
};

</script>
</head>

<body>
<canvas id="c1">
    <span>不支持canvas浏览器</span>
</canvas> <!--默认：宽300 高150-->
</body>
</html>
  • 相关阅读:
    .Net下HTTP访问穿越多层代理的方法以及代理服务器的验证 转载
    SB淘宝api的奇葩问题! 一则服务器无法访问淘宝api
    C# 系统应用之清除Cookies、IE临时文件、历史记录 转载
    Replication--进程无法在“xxxx”上执行“sp_replcmds”
    [leetcode] Search Insert Position
    [leetcode] Search for a Range
    [leetcode] Merge Sorted Array
    [leetcode] Remove Element
    [leetcode] Find Minimum in Rotated Sorted Array
    [leetcode] Container With Most Water
  • 原文地址：https://www.cnblogs.com/yaowen/p/5358926.html
Copyright © 2011-2022 走看看