您的位置：首页 > 其它

Canvas：绘制坦克

2017-04-13 18:33 169 查看

一、代码

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#floor {
background:#000;
position: absolute;
top: 50%;
left:50%;
transform:translate(-50%, -50%);
}
</style>
<script>
window.onload = function(){
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.fillStyle = "#542174";
cxt.fillRect(350,400,20,65); //坦克左边的履带
cxt.fillRect(420,400,20,65); //右边的履带
cxt.fillRect(373,410,44,50); //中间的主体
cxt.fillStyle = "#FCB827";
cxt.beginPath();
cxt.arc(395,435,16,0,2*Math.PI,false); //主体上的圆盖
cxt.closePath();
cxt.fill();
cxt.strokeStyle = "#FCB827";
cxt.lineWidth = "8.0";
cxt.moveTo(395,435); //炮筒起点
cxt.lineTo(395,375); //炮筒终点
cxt.stroke(); //画炮筒
}
</script>
</head>

<body>
<canvas id="floor" width="800px" height="500px"></canvas>
</body>
</html>

二、效果图

更多详情参阅：H5坦克大战之【画出坦克】

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航