Chinaunix首页 | 论坛 | 博客

甜心183的ChinaUnix博客

首页　| 　博文目录　| 　关于我

甜心183

  • 博客访问： 114547
  • 博文数量： 40
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 423
  • 用 户 组： 普通用户
  • 注册时间： 2013-01-15 11:55
文章分类

全部博文（40）

文章存档

2016年（36）

2015年（2）

2013年（2）

我的朋友
最近访客
推荐博文
canvas画连环圆实例

分类： jQuery

2016-03-25 17:57:44

canvas画圆的实例

点击(此处)折叠或打开

  1. <!DOCTYPE html >
  2. <html>
  3.  <head>
  4.     <title>cars</title>
  5.     <script src=""></script>
  6.  </head>
  7.  <body>
  8.    <canvas id ="canvas" width="200" height="200"></canvas>
  9.    <script>
  10.      var canvas = document.getElementById("canvas");
  11.      var ctx = canvas.getContext("2d");
  12.     var circle = function(x,y,radius){
  13.      ctx.beginPath();
  14.      ctx.arc(x,y,radius,0,Math.PI*2,false);
  15.      ctx.stroke();
  16.     }
  17.     ctx.lineWidth = 4;
  18.     ctx.strokeStyle = "red";
  19.     circle(100,100,10);
  20.     ctx.strokeStyle = "orange";
  21.     circle(100,100,20);
  22.     ctx.strokeStyle = "yellow";
  23.     circle(100,100,30);
  24.     ctx.strokeStyle = "green";
  25.     circle(100,100,40);
  26.     ctx.strokeStyle = "blue";
  27.     circle(100,100,50);
  28.     ctx.strokeStyle = "purple";
  29.     circle(100,100,60);
  30.    </script>
  31.  </body>
  32. </html>

阅读(953) | 评论(0) | 转发(0) |
0

上一篇：canvas画弧线和圆的实例

下一篇：canvas动画实例1

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6