小代码 个人logo arc版本

//
//
//http://www.365mini.com/diy.php?f=html5-canvas-circle-demo-1
//       以下代码 在线运行+本地支持 
 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas绘制弧线入门示例</title>
</head>
<body>

<!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="50px" height="50px" style="border: 1px solid red;">
 
</canvas>

<script type="text/javascript">
  <!-- 1 -->
var canvas = document.getElementById("myCanvas");
if(canvas.getContext){   
    var ctx = canvas.getContext("2d");    
    ctx.beginPath(); 
    ctx.strokeStyle = "blue";
    var circle = { x : 10,  y : 40,   r : 10  };
ctx.arc(circle.x, circle.y, circle.r, -Math.PI*3/ 4, Math.PI / 2, false);   ctx.stroke();
}
	 <!-- 2 -->
var canvas = document.getElementById("myCanvas");
if(canvas.getContext){   
    var ctx = canvas.getContext("2d");    
    ctx.beginPath(); 
    ctx.strokeStyle = "blue";
    var circle = { x : 25,  y : 26,   r : 10  };ctx.arc(circle.x, circle.y, circle.r, -Math.PI/2, Math.PI/4, true);      ctx.stroke();
}
	  <!-- 3-->
var canvas = document.getElementById("myCanvas");
if(canvas.getContext){   
    var ctx = canvas.getContext("2d");    
    ctx.beginPath(); 
    ctx.strokeStyle = "red";
    var circle = { x : 30,  y : 35,   r : 10  };
ctx.arc(circle.x, circle.y, circle.r, -Math.PI*3/ 4, Math.PI / 2, false);   ctx.stroke();
}
	 <!-- 4 -->
var canvas = document.getElementById("myCanvas");
if(canvas.getContext){   
    var ctx = canvas.getContext("2d");    
    ctx.beginPath(); 
    ctx.strokeStyle = "red";
    var circle = { x :45,  y : 23,   r : 10  };ctx.arc(circle.x, circle.y, circle.r, -Math.PI/2, Math.PI/4, true);      ctx.stroke();
}
</script>
</body>
</html>
    

你可能感兴趣的:(html,小代码,logo)