<!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. CI框架 -- 驱动器

    驱动器目录及文件结构 下面是驱动器目录和文件结构布局的简单例子: /application/libraries/Driver_name Driver_name.php //驱动器名称 drivers ...

  2. ASP.NET后台输出js脚本代码

    利用asp.net输出js我们大多数都会直接使用Respone.Write()然后根js格式的代码,再在页面调用时我们直接这样是完全可以实现的,下面我来给大家介绍另一种方法 我是我最初的想法以下是代码 ...

  3. 二维数组按某个键值排序 FOR PHP

    $arr=[ array( 'name'=>'小坏龙', 'age'=>28 ), array( 'name'=>'小坏龙2', 'age'=>14 ), array( 'na ...

  4. vue项目中使用md5.js及base64.js

    一.在项目根目录下安装 npm install --save js-base64 npm install --save js-md5 二.在项目文件中引入 import md5 from 'js-md ...

  5. 关于HTTP Message

    HTTP Message包括JS, HTML等Resource.这些都是相对来说有代码可以写的东西,但是原理的东西是没有代码的.coding只是很少的一部分工作内容. Browser的流程.比如con ...

  6. textarea标签内容为(英文或数字不自动换行)的解决方法

    textarea 显示一串英文时不会发生换行. 以下是两种解决方法:1.限制textarea的大小 width 设置为 00px (不要设置为00%)cols  设置为 30+ (也有类似效果) 2. ...

  7. 录制iPhone屏幕并转成gif方案

    app的开发经常会碰到需要演示一个交互,或者一个bug的情况,通常涉及一连串的操作以及操作的反馈,这是文字,或截图都无法表达的,视频的话还得播放器参与,最好的一个想法应该是录制屏幕然后再转成gif图片 ...

  8. koa2使用注意点总结

    post请求,ajax传入的参数获取的时候为ctx.request.body get请求,ajax传入参数获取的时候为ctx.request.query.参数名 koa-csrf可以设置什么请求的时候 ...

  9. 适用于Win8的Office2003_SP3精简版集成各类补丁+兼容包

    适用于Win8的Office2003_SP3精简版集成各类补丁+兼容包软件名称: Office 软件版本: Office2003_SP3 软件大小: 104M 软件语言: 简体中文 软件授权: 破解 ...

  10. 如何让form表单在enter键入时不提交

    今天在做我的一个小玩意 在线聊天工具的时候 form表单只有一个text和一个button每当我键入enter的时候就刷新.很是郁闷,直接在form上onsumbit=false.才行. 下面是我查询 ...