首页 > 代码库 > html5——canva 绘图1简单图形
html5——canva 绘图1简单图形
<!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>
html5——canva 绘图1简单图形
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。