canvas练习 - 圆
<!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练习 - 圆的更多相关文章
- canvas 绘圆加边框
HTML5中canvas元素,绘制圆形需要使用路径,开始时要取得图形上下文,首先使用路径来勾勒图形的轮廓,然后设置颜色,进行绘制. arc(cx,cy,radius,start_angle,end_a ...
- html5 canvas从圆开始
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Canvas 画圆
原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b --------------------------------------- ...
- canvas画圆百分比显示
代码如下,由于canvas还是不太熟悉,还有很多欠缺,希望大家多提意见,谢谢 function DrawArc(id,opations){ this.canvas = document.getElem ...
- canvas画圆类似于锯齿指针 angular5
拿到图的时候大致是这样的,里面的圆是有动态效果的,考虑到gif图耗资源,于是想要用canvas画出来: 仔细看图不难发现,这个锯齿圆类似于表盘,计算好弧度,不难实现: 因为项目现在用的框架是angul ...
- canvas实现圆框图片
作者:issac_宝华链接:http://www.jianshu.com/p/9a6ee2648d6f來源:简书 在html中做圆框图片很容易,只需要简单的 border-radius: 50%; 当 ...
- 微信小程序 canvas 绘制圆形状
page({ // 绘制canvas drawCanvas:function(){ const ctx = wx.createCanvasContext('poster') // 画圆形二维码 thi ...
- canvas画圆又毛边
canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang="en" ...
- canvas画圆(一)
仿第一次效果
随机推荐
- (转) IDirectSoundBuffer::SetVolume的参数与音量分贝的函数关系
假如将播放器的控制音量切割成0-100的话,由于IDirectSoundBuffer::SetVolume(LONG lVolume)中参数的输入值是[-10000,0] MySetVolume( D ...
- Python——with语句、context manager类型和contextlib库
目录 一.with语句 二.上下文管理器 三.contextlib模块 基本概念 上下文管理协议(Context Management Protocol) 包含方法 __enter__() 和 __e ...
- Lemon OA第3篇:核心功能
对Lemon OA系统的核心功能进行梳理,分别介绍说明如下文. Portal页面 还是从用户主页开始说起: OA核心的功能就是流程,启动流程,办理流程,查看历史,3个常用功能都罗列在用户主页上,方便用 ...
- Java常用类(二)String类详解
前言 在我们开发中经常会用到很多的常用的工具类,这里做一个总结.他们有很多的方法都是我们经常要用到的.所以我们一定要把它好好的掌握起来! 一.String简介 1.1.String(字符串常量)概述 ...
- 【转】Spring Boot干货系列:(三)启动原理解析
前言 前面几章我们见识了SpringBoot为我们做的自动配置,确实方便快捷,但是对于新手来说,如果不大懂SpringBoot内部启动原理,以后难免会吃亏.所以这次博主就跟你们一起一步步揭开Sprin ...
- spark 源码阅读博客
http://blog.csdn.net/oopsoom/article/details/38257749
- IP冲突解决方案
客人在我所供职的酒店上网的时候,经常会弹出一个对话框,显示一些提示,如上网的注意事项和消费标准等信息;并且有自己的电影和歌曲服务器,DHCP-server也是其中的一台服务器,宾馆.酒店就是用这台机器 ...
- 在jsp中使用jstl,不使用JS,实现递归,生成N级菜单
参考材料: http://blog.csdn.net/kimsoft/article/details/7801564 我的实现: 1.我的recursionMenu.jsp代码如下: <%@ ...
- JQ 使用toggle实现DIV的隐藏和显示
$('.submenuA').toggle( function () { $(this).next('div').show(); }, function () { $(this).next('div' ...
- [OpenCV] Samples 06: logistic regression
logistic regression,这个算法只能解决简单的线性二分类,在众多的机器学习分类算法中并不出众,但它能被改进为多分类,并换了另外一个名字softmax, 这可是深度学习中响当当的分类算法 ...