<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background: #131115;}
#c1{background: #fbf7fe;}
</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='round';
/*不带边框的正方形*/
oGC.fillRect(50,50,100,100);
/*带边框的正方形*/
oGC.strokeRect(50.5,50.5,100,100);
/*背景颜色*/
}
</script>
</head>
<body>
<canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
<span>不支持camvas浏览器</span>
</canvas>
</body>
</html>
三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background: #131115;}
#c1{background: #fbf7fe;}
</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.fill();
}
</script>
</head>
<body>
<canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
<span>不支持camvas浏览器</span>
</canvas>
</body>
</html>
canvas封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background: #131115;}
#c1{background: #fbf7fe;}
</style>
<script>
window.onload=function(){
var oC=document.getElementById('c1');
var oGC=oC.getContext('2d');
/*保存路径*/
oGC.save();
oGC.fillStyle='red';
oGC.beginPath();
/*正方形集合函数*/
oGC.rect(100,100,100,100);
oGC.closePath();
oGC.fill();
/*恢复路径 oGC.fillStyle='red';不影响下面代码起到封装作用*/
oGC.restore();
oGC.beginPath();
oGC.rect(220,100,100,100);
oGC.closePath();
oGC.fill();
}
</script>
</head>
<body>
<canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
<span>不支持camvas浏览器</span>
</canvas>
</body>
</html>
鼠标画线代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background: #131115;}
#c1{background: #fbf7fe;}
</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);
oC.onmousemove=function(ev){
var ev=ev||window.event;
oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
oGC.stroke();
}
document.onmouseup=function(){
oC.onmousemove=null;
oC.onmouseup=null;
}
}
}
</script>
</head>
<body>
<canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
<span>不支持camvas浏览器</span>
</canvas>
</body>
</html>
简单的方块下滑代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background: #131115;}
#c1{background: #fbf7fe;}
</style>
<script>
window.onload=function(){
var oC=document.getElementById('c1');
var oGC=oC.getContext('2d');
var num=0;
oGC.fillStyle='red';
oGC.fillRect(30,0,100,100);
setInterval(function(){
num++;
oGC.clearRect(30,0, oC.width,oC.height);
oGC.fillRect(30,num,100,100);
},30)
}
</script>
</head>
<body>
<canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
<span>不支持camvas浏览器</span>
</canvas>
</body>
</html>