今天突然想用HTML5的canvas做一个箭头玩玩儿
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
window.οnlοad=function() {
var arrow=document.getElementById("arrow");
var arrowx=arrow.getContext('2d');
arrowx.fillStyle='rgb(0,0,0)';
arrowx.translate(140,70)
arrowx.rotate(45*Math.PI/180);
arrowx.fillRect(0,0,50,50);
arrowx.rotate(45*Math.PI/180);
arrowx.clearRect(0,-50,100,50);
arrowx.fillRect(31, -50, 10, 50);
}
</script>
<style type="text/css">
html,body,canvas,div {
margin: 0;
padding: 0;
border: 0;
}
#back {
margin-top: 50px;
background-color: #aaa;
border-radius: 100px;
width: 200px;
height: 200px;
margin-left: -100px;
}
#arrow {
}
</style>
</head>
<body>
<div id="back">
<canvas id="arrow">
</canvas>
</div>
</body>
</html>
4631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
