<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>circle</title>

</head>

<script type="text/javascript">

 // javapig draw circle

 function pig(id) {

  var canvas = document.getElementById(id);

  if(canvas.getContext){

   var ctx = canvas.getContext("2d");

   ctx.strokeStyle = "#FFCCCC";

   var circle = {

    x : 200,

    y : 200,

    r : 20      //最小圆的半径

   };

   // 画5个圆圈

   ctx.beginPath();

   ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);

   ctx.stroke();

   ctx.beginPath();

   ctx.arc(circle.x, circle.y, circle.r+20, 0, Math.PI * 2, true);

   ctx.stroke();

   ctx.beginPath();

   ctx.arc(circle.x, circle.y, circle.r+40, 0, Math.PI * 2, true);

   ctx.stroke();

   ctx.beginPath();

   ctx.arc(circle.x, circle.y, circle.r+60, 0, Math.PI * 2, true);

   ctx.stroke();

   ctx.beginPath();

   ctx.arc(circle.x, circle.y, circle.r+80, 0, Math.PI * 2, true);

   ctx.stroke();

   // 画十字线

   var bp = 200 - Math.sqrt( 100*100/2 );

   ctx.beginPath();

      ctx.moveTo(bp,bp);

   var ep = 200 + Math.sqrt( 100*100/2 );

   ctx.lineTo(ep,ep);

   ctx.stroke();

   ctx.beginPath();

      ctx.moveTo(bp,ep);

   ctx.lineTo(ep,bp);

   ctx.stroke();

   // 画折线 四项分数分别为 100、 90 、75 、95

   ctx.strokeStyle = "rgb(250,0,0)";

   bp = 200 - Math.sqrt( 100*100/2 );

   ctx.beginPath();

      ctx.moveTo(bp,bp);

   bp = 200 -  Math.sqrt( 80*80/2 );

   ep = 200 +  Math.sqrt( 80*80/2 );

   ctx.lineTo(bp,ep);

   bp = 200 +  Math.sqrt( 75*75/2 );

   ep = 200 +  Math.sqrt( 75*75/2 );

   ctx.lineTo(bp,ep);

   bp = 200 +  Math.sqrt( 75*75/2 );

   ep = 200 +  Math.sqrt( 75*75/2 );

   ctx.lineTo(bp,ep);

   bp = 200 +  Math.sqrt( 95*75/2 );

   ep = 200 -  Math.sqrt( 95*75/2 );

   ctx.lineTo(bp,ep);

   ctx.closePath();

   ctx.stroke();

  }

 }

</script>

<body bgcolor="" onLoad="pig('y')">

 <canvas style="background:#FFC" height="400" width="400" id="y"></canvas>

</body>

</html>

使用canvas画一个雷达效果图的特效代码的更多相关文章

  1. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  2. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  3. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  4. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  5. 手对手的教你用canvas画一个简单的海报

    啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信.qq等平台.图片中包含用户的姓名.头像.和带着自己信息的二维码.然后,如何生成这张海报呢~~~首先我们老大告诉我有一个插件叫htm ...

  6. 使用H5 canvas画一个坦克

      具体步骤如下:   1. 首先做出绘图区,作为坦克的战场   <canvas id="floor" width="800px" height=&quo ...

  7. 用canvas画一个的小画板（PC端移动端都能用）

    前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...

  8. 玩转html5（四）----使用canvas画一个时钟（可以动的哦！）

    先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <ht ...

  9. canvas画一个时钟

    效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. 第六模块：WEB框架开发 第1章·Django框架开发88~128

    88-Ajax简介 89-Ajax的简单实现 90-基于Ajax的传递数据 91-基于Ajax的登录验证 92-基于Form表单的文件上传 93-请求头之contentType 94-Ajax传递js ...

  2. 树莓派 Raspberry Pi 与 micro：bit起手式

    本文将学习如何在Raspberry Pi上安装MicroPython编辑器mu,并将MicroPython中编写的程序从您的Raspberry Pi推送到micro:bit. 您需要: 硬件, 带有S ...

  3. Java应用基础微专业-设计篇

    第1章--抽象与接口 1.1 抽象 An abstract class can be created without abstract methods, the purpose of doing th ...

  4. ubuntu networking 与 network-manager

    刚遇到的坑,因为操作不当导致网络中断,于是手动配置了/etc/network/interfaces , 修复了系统之后发现ubuntu-desktop中的有线链接不见了,百度了一下说是networki ...

  5. Python入门（5）

    导览: 函数 集合 迭代器与生成器 模块 一.函数 只要学过其他编程语言应该对函数不太陌生,函数在面向过程的编程语言中占据了极重要的地位,可以说没有函数,就没有面向过程编程,而在面向对象语言中,对象的 ...

  6. Dev c++ 调试步骤

    不能调试的时候,修改下列地方: 1.在“工具”->编译选项->”Add following commands when calling complier”下面的编辑框里写入:-g3 2.在 ...

  7. Python3 Tkinter-Entry

    1.创建 from tkinter import * root=Tk() t1=Entry(root) t1.pack() root.mainloop() 2.绑定变量 from tkinter im ...

  8. Thunder团队第二周 - Scrum会议7

    Scrum会议7 小组名称:Thunder 项目名称:i阅app Scrum Master:杨梓瑞 工作照片: 参会成员: 王航:http://www.cnblogs.com/wangh013/ 李传 ...

  9. 【IdentityServer4文档】- 贡献

    贡献 我们非常乐于接受社区贡献,但您应遵循一些指导原则,以便我们可以很方便的解决这个问题. 如何贡献? 最简单的方法是打开一个问题并开始讨论.然后,我们可以决定如何实现一个特性或一个变更.如果您即将提 ...

  10. eg_4

    4. 编写一个程序,要求以树状结构展现特定的文件夹及其子文件(夹) import java.io.*; public class Test { public static void main(Stri ...