h5-4 canvas

2021-10-15 20:07:29

<!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>
上一篇：Fiddler 抓取 Genymotion 数据包


下一篇：[题解]codevs1001 舒适的路线