<!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. Linux命令应用大词典-第16章 归档和压缩

    16.1 tar:进行归档和压缩 16.2 gzip:压缩或解压缩gzip文件 16.3 gunzip:解压缩gzip文件 16.4 zcmp:比较gzip压缩文件 16.5 zdiff:比较gzip ...

  2. ntp服务：实现时间同步

    一. 引言 目前的项目为分布式系统,采用dubbo+zookeepe,排查BUG,发现各个服务器的时间不一致,遂网上查找资源,使得时间保持一致. 二. 步骤 1)以第一台服务器为“服务端”,其他台服务 ...

  3. 基于Kubernetes（k8s）的RabbitMQ 集群

    目前,有很多种基于Kubernetes搭建RabbitMQ集群的解决方案.今天笔者今天将要讨论我们在Fuel CCP项目当中所采用的方式.这种方式加以转变也适用于搭建RabbitMQ集群的一般方法.所 ...

  4. 实战小项目之ffmpeg推流yolo视频实时检测

    之前实现了yolo图像的在线检测,这次主要完成远程视频的检测.主要包括推流--収流--检测显示三大部分 首先说一下推流,主要使用ffmpeg命令进行本地摄像头的推流,为了实现首屏秒开使用-g设置gop ...

  5. Beta阶段项目展示博客

    Beta阶段项目展示 团队成员的简介 详细见团队简介 角色 姓名 照片 项目经理,策划 游心 策划 王子铭 策划 蔡帜 美工 赵晓宇 美工 王辰昱 开发.架构师 解小锐 开发 陈鑫 开发 李金奇 开发 ...

  6. c# 编译的dll看不见注释问题

    1.项目属性---->生成----->勾选XML文档文件: 2.使用的时候该文件和dll放在一块.

  7. 福大软工1816：Alpha（10/10）

    Alpha 冲刺 (10/10) 队名:第三视角 组长博客链接 本次作业链接 团队部分 团队燃尽图 工作情况汇报 张扬(组长) 过去两天完成了哪些任务: 文字/口头描述: 1.和愈明.韫月一起对接 2 ...

  8. 在用js拼接html时，给元素加不上事件的问题

    问题描述:有时,发起ajax请求成功后,需要用js去拼接一小段html字符串,然后给某些元素添加事件时,事件总是加不上. 解决办法:在success 回调函数内,给元素添加事件绑定. 代码如下: $. ...

  9. Swift-闭包理解

    /* 闭包(Closures) * 闭包是自包含的功能代码块,可以在代码中使用或者用来作为参数传值. * 在Swift中的闭包与C.OC中的blocks和其它编程语言(如Python)中的lambda ...

  10. angular4中使用jquer插件

    有以下办法 1 在html文档头部引入jquery插件依赖,但是文档一旦变动就麻烦了 2 使用指令:http://www.cnblogs.com/liuyt/p/5810100.html 指令是把利器 ...