<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>canvas画圆</title>

  <style>

    canvas{

      border: 1px solid #eee;

    }

  </style>

</head>

<body>

  <canvas id="canvas">

    您的浏览器不支持canvas，请更换浏览器观看

  </canvas>

  <script>

    var myCanvas = document.getElementById('canvas');

    myCanvas.width = 600;

    myCanvas.height = 600;

    var context = myCanvas.getContext('2d');

    context.font = '20px Microsorft YaHei';

    context.lineWidth = 4;

    context.strokeStyle = '#00b6ff';

    function drawArc(x,y,bool,ant=false) {

      let value = 10*x,

          radius = 20,

          centerX = (x - 1) * (2 * radius + 15) + 25;//1:20,2:70(20+50),3:120(20+50+50)

      context.beginPath();

      context.arc(centerX, y, radius, 0, value / 50 * Math.PI,ant);

      if(bool)

        context.closePath();

      context.stroke();

    }

    /* 默认填充颜色-黑色 */

    context.fillText('一、使用closePath， 口就会自动封闭',10,20);

    for (let i = 1; i <= 10; i++) {

      /* 使用closePath 口就会封闭*/

      drawArc(i,50,true);

    }

    /* 使用渐变填充文字 */

    var gradient = context.createLinearGradient(0,0, myCanvas.width,0);

    gradient.addColorStop("0","#f00");

    // gradient.addColorStop("0.5","#0f0");

    gradient.addColorStop("1","#00f");

    context.fillStyle = gradient;

    context.fillText('二、不使用closePath关闭每个圆',10,120);

    for (let i = 1; i <= 10; i++) {

      /* 不使用closePath，口就不会封闭 */

      drawArc(i,150,false);

    }

    context.fillText('三、逆时针效果，用来说明上下左右四个pi点是不变的',10,220);

    context.fillText('顺时针的0.5pi和逆时针时的0.5pi，都集中在一个点上。',10,250);

    for (let i = 1; i <= 10; i++) {

      /* 使用closePath，口就不会封闭 */

      drawArc(i,280,true,true);

    }

    context.fillText('四、开口时可以更直观看逆时针效果',10,350);

    for (let i = 1; i <= 10; i++) {

      /* 不使用closePath，口就不会封闭 */

      drawArc(i,380,false,true);

    }

    context.fillText('逆时针的时候，0.5pi竟然是第一个趋近于整圆的状态',10,420);

    context.fillText('也就是0.5pi是一个地标的感觉，并不是弧长',10,450);

  </script>

</body>

</html>

　　

canvas练习 - 圆的更多相关文章

  1. canvas 绘圆加边框

    HTML5中canvas元素,绘制圆形需要使用路径,开始时要取得图形上下文,首先使用路径来勾勒图形的轮廓,然后设置颜色,进行绘制. arc(cx,cy,radius,start_angle,end_a ...

  2. html5 canvas从圆开始

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Canvas 画圆

    原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b --------------------------------------- ...

  4. canvas画圆百分比显示

    代码如下,由于canvas还是不太熟悉,还有很多欠缺,希望大家多提意见,谢谢 function DrawArc(id,opations){ this.canvas = document.getElem ...

  5. canvas画圆类似于锯齿指针 angular5

    拿到图的时候大致是这样的,里面的圆是有动态效果的,考虑到gif图耗资源,于是想要用canvas画出来: 仔细看图不难发现,这个锯齿圆类似于表盘,计算好弧度,不难实现: 因为项目现在用的框架是angul ...

  6. canvas实现圆框图片

    作者:issac_宝华链接:http://www.jianshu.com/p/9a6ee2648d6f來源:简书 在html中做圆框图片很容易,只需要简单的 border-radius: 50%; 当 ...

  7. 微信小程序 canvas 绘制圆形状

    page({ // 绘制canvas drawCanvas:function(){ const ctx = wx.createCanvasContext('poster') // 画圆形二维码 thi ...

  8. canvas画圆又毛边

    canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang="en" ...

  9. canvas画圆（一）

    仿第一次效果

随机推荐

  1. Android Notification和权限机制探讨

    近期为了在部门内做一次小型的技术分享.深入了解了一下Notification的实现原理.以及android的权限机制.在此做个记录.文章可能比較长,没耐心的话就直接看题纲吧. 先看一下以下两张图 图一 ...

  2. Java常量池的理解

    1.常量池的好处常量池是为了避免频繁的创建和销毁对象而影响系统性能,其实现了对象的共享.例如字符串常量池,在编译阶段就把所有的字符串文字放到一个常量池中.(1)节省内存空间:常量池中所有相同的字符串常 ...

  3. 仿网易nec首页动画效果

    仿网页nec首页动画效果nec链接:http://nec.netease.com/ 首先,介绍animationanimation检索或设置对象所应用的动画特效.animation由“keyframe ...

  4. js中的方法调用

    <script> var m = {com: { sao: {citi:{}}}}; m.com.sao.citi.init = new function() { this.name = ...

  5. GCT之语文细节知识

    以下是在微博中看到的,大部分人都会读错的汉字,这也是历届GCT考试的前几道选择题可能会出的题库资源吧,高考的时候也大都考的这些,拿来共享给大家.一定要看哦.

  6. keynote代码高亮【转】

    码农即使做ppt,也离不开代码,在keynote下,如果要粘贴代码,如何做到语法高亮呢? 补充1,该功能由pygments提供支持,所以支持的语言见:http://pygments.org/langu ...

  7. 如何将会员名单加入LINE＠生活圈？

    如何将会员名单加入LINE@生活圈? 我要如何将会员名单加入LINE@生活圈呢?答案是没有办法利用LINE@生活圈直接加入会员名单,LINE@生活圈是许可式行销,必须由LINE好友主动将LINE@生活 ...

  8. linux(redhat)环境下,如何解压rar文件?

    需求描述: 今天一个同事发过来一个压缩文件,让传送到linux服务器上,传上去之后,发现是rar格式的 之前没有解压过,就找了一些解压方法,在此记录下. 操作过程: 1.下载rar在linux环境下的 ...

  9. MongoDB使用经验总结

    摘要: 最近在开发项目使用了数据库MongoDB,我将它的使用方法整理下分享给大家.至于mongoDB有什么优点,大家可以到官网去看. 安装: 首先我们需要到官网下载适合自己系统的mongodb. w ...

  10. 史上最强大的python selenium webdriver的包装

    1.之前已经发过两次使用单浏览器了,但是这个最完美,此篇并没有使用任何单例模式的设计模式,用了实例属性结果缓存到类属性. 2.最简单的控制单浏览器是只实例化一次类,然后一直使用这个对象,但每个地方运行 ...