<!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. 前端开发工程师 - 03.DOM编程艺术 - 期末考试

    期末考试客观题 返回    倒计时: 01:24 1 单选(2分) 以下选项中不是节点类型的是 A. COMMENT_NODE B. DOCUMENT_NODE C. BODY_NODE D. E ...

  2. HDU - 6440（费马小定理）

    链接:HDU - 6440 题意:重新定义加法和乘法,使得 (m+n)^p = m^p + n^p 成立,p是素数.,且satisfied that there exists an integer q ...

  3. [Clr via C#读书笔记]Cp16数组

    Cp16数组 一维数组,多维数组,交错数组:引用类型:P338的图非常的清楚地描述了值类型和引用类型在托管堆中的关系:越界检查: 数组初始化 数组初始化器: 四种写法 string[] names = ...

  4. AC 自动机——多模式串匹配

    网站上的敏感词过滤是怎么实现的呢? 实际上,这些功能最基本的原理就是字符串匹配算法,也就是通过维护一个敏感词的字典,当用户输入一段文字内容后,通过字符串匹配算法来检查用户输入的内容是否包含敏感词. B ...

  5. 《机器学习实战》笔记——决策树（ID3）

    现在要介绍的是ID3决策树算法,只适用于标称型数据,不适用于数值型数据. 决策树学习算法最大的优点是,他可以自学习,在学习过程中,不需要使用者了解过多的背景知识.领域知识,只需要对训练实例进行较好的标 ...

  6. php性能优化--opcache

    一.OPcache是什么? OPcache通过将 PHP 脚本预编译的字节码存储到共享内存中来提升 PHP 的性能, 存储预编译字节码的好处就是 省去了每次加载和解析 PHP 脚本的开销. PHP 5 ...

  7. Linux下误删文件恢复办法

    恢复删除的文件 当误删除文件时,如果还有程序对此文件进行操作,那么可以通过lsof 命令恢复文件内容. 举例: 误删粗messages日志文件 [root@cdn ~]# cat /var/log/m ...

  8. 基于NABCD评论“探路者”Alpha版作品

    1.分析 N(Need):”为了重温贪吃蛇这一经典游戏,本组的选题定为贪吃蛇游戏,并在此基础上进行了新的创新,将普通的贪吃蛇游戏改为单词版贪吃蛇.市面上的英语单词背记软件对于那些缺少英语学习兴趣.毅力 ...

  9. 2019寒假训练营寒假作业（二） MOOC的网络空间安全概论笔记部分

    视频课程--MOOC的网络空间安全概论笔记 第一章 网络空间安全概述 2001年,网络空间概念被首次提出: 网络空间安全框架: 1.设备层安全: 可通过截获电磁辐射获取计算机信息.通过硬件木马(恶意电 ...

  10. 有关c#的学习笔记整理与心得

    [ 塔 · 第 一 条 约 定 ] 整理c#:Array Arraylist List Hashtable Dictionary Stack Queue等 Array 的容量是固定的,而 ArrayL ...