<!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. 第四模块：网络编程进阶&数据库开发 第2章·MySQL数据库开发

    01-MySQL开篇 02-MySQL简单介绍 03-不同平台下安装MySQL 04-Windows平台MySQL密码设置与破解 05-Linux平台MySQL密码设置与破解 06-Mac平台MySQ ...

  2. Redis4.0支持的新功能说明

    本文以华为云DCS for Redis版本为例,介绍Redis4.0的新功能.文章转载自华为云帮助中心. 与Redis3.x版本相比,DCS的Redis4.x以上版本,除了开源Redis增加的特性之外 ...

  3. truffle框架快速开发合约步骤

    矩阵元区块链智能合约开发指南 1 适用范围 本规范描述了矩阵元区块链系统智能合约的开发约束与规范,用以指导DAPP开发者按照本规范开发基于矩阵元区块链运行的应用. 2 术语解释 术语 术语解释 DAP ...

  4. Microservices with Spring Boot

    找到一套比较不错的Spring Boot/Cloud入门教程,推荐一下. https://dzone.com/users/1041459/ranga_pec.html

  5. Linux下安装paramiko

    paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接. 由于使用的是python这样的能够跨平台运行的语言,所以所有python支持的平台, ...

  6. Python中的slice操作

    Python中slice操作的完整语法: # i默认是0 # j默认是len(S) # k的步长,默认为+1 S[i:j:k] 其中i,j,k都可以是负数: 若i < 0或者k<0,等价于 ...

  7. File Searching

    Description Have you ever used file searching tools provided by an operating system? For example, in ...

  8. 20145214实验三 敏捷开发与XP实践

    20145214实验三 敏捷开发与XP实践 XP准则 沟通 :XP认为项目成员之间的沟通是项目成功的关键,并把沟通看作项目中间协调与合作的主要推动因素. 简单 :XP假定未来不能可靠地预测,在现在考虑 ...

  9. BluetoothDevice详解

    一. BluetoothDevice简介 1. 继承关系 public static Class BluetoothDevice extends Object implement Parcelable ...

  10. 第三次寒假作业 sketch 了解

    什么是sketch? sketch 是一种基于散列的数据结构,可以在高速网络环境中,实时地存储流量特征信息,只占用较小的空间资源,并且具备在理论上可证明的估计精度与内存的平衡特性. 通过设置散列函数, ...