canvas实例宝马图标
2018-12-15 本文已影响8人
最帅的坏兔子
<!DOCTYPE html>
<html>
<head>
<title>宝马图标</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas');
canvas.width = 600;
canvas.height = 600;
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'white';
ctx.fillRect(0,0,600,600);
ctx.beginPath();
ctx.arc(300,300,300,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(300,300,295,0,2*Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(300,300,200,0,2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
ctx.beginPath();
ctx.arc(300,300,195,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(300,300,195,0,Math.PI/2);
ctx.lineTo(300,300);
ctx.closePath();
ctx.fill();
ctx.arc(300,300,195,Math.PI,Math.PI*(3/2));
ctx.lineTo(300,300);
ctx.closePath();
ctx.fill();
}
</script>
</html>
宝马图标.png
