啊~现在应该还是春天吧、心情一如既往的烦闷呐、最近做了一个canvas的扇形绘制的东西、把它整理出来变成一个适合春天的花朵绘制~沉闷的工作环境已经让我这种有趣的人也变成了无聊鬼怪呢。下次一定想找一个年轻的明亮的有意思的技术环境~

canvas绘制圆、弧参考理解：http://www.cnblogs.com/guopei/archive/2011/06/30/2093981.html

随机颜色函数参考：https://yq.aliyun.com/ziliao/174922

最终实现图

怎么样、还可以吧~七色花有些颜色相近是因为这个绘制过程比较短、所以随机的时候时间相近就颜色比较近、而且因为渐变、颜色仅仅是深浅区别就更不明显了、但其颜色的rgb值是不同哒·

进入主题哒哒哒~~~~~

①。先来绘制圆心

效果

核心代码

<!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>Document</title>

</head>

<body>

    <div style="height: 100px"></div>

    <div style="text-align: center">

        <canvas id="myCanvas" style="border: 1px solid gray;background-color: lightblue" width="600" height="400">

    </canvas>

    </div>

    <script>

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

        var ctx = canvas.getContext('2d');

        function draw() {

            //定义绘制圆心的方法

            CanvasRenderingContext2D.prototype.circle = function(x, y, raidus, color) {

                this.beginPath();

                this.arc(x, y, raidus, 0, Math.PI * 2, false); //x:坐标点x;y:坐标点y;raidus:圆半径;0:起点角度;Math.PI*2:终点角度;false:非逆时针

                this.closePath();

                this.fillStyle = color; // 填充颜色;

                this.fill(); //对图形进行填充

            }

        }

        function show() {

            draw(); //调用定义好的绘制方法

            ctx.circle(100, 150, 10, '#FFFF00'); //绘制圆心

        }

        window.onload(show())

    </script>

</body>

</html>

drawCircle.js

②。绘制扇形

效果：

核心代码

<!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>Document</title>

</head>

<body>

    <div style="height: 100px"></div>

    <div style="text-align: center">

        <canvas id="myCanvas" style="border: 1px solid gray;background-color: lightblue" width="600" height="400">

    </canvas>

    </div>

    <script>

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

        var ctx = canvas.getContext('2d');

        function draw() {

            //定义绘制圆心的方法

            CanvasRenderingContext2D.prototype.circle = function(x, y, raidus, color) {

                this.beginPath();

                this.arc(x, y, raidus, 0, Math.PI * 2, false); //x:坐标点x;y:坐标点y;raidus:圆半径;0:起点角度;Math.PI*2:终点角度;false:非逆时针

                this.closePath();

                this.fillStyle = color; // 填充颜色;

                this.fill(); //对图形进行填充

            }

            //定义绘制扇形的方法

            CanvasRenderingContext2D.prototype.sector = function(x, y, radius, innerR, sDeg, eDeg, color, lineWidth) {

                const DEG = Math.PI / 180;

                var grad = this.createRadialGradient(x, y, 1, x, y, radius + radius); //定义一个渐变色

                grad.addColorStop(0, 'rgba(255,255,255,255)'); //从白色圆心处渐变出来

                grad.addColorStop(1, color); //渐变出传入颜色

                this.beginPath();

                this.moveTo(x, y);

                this.arc(x, y, radius, DEG * sDeg, DEG * eDeg, false); //画圆同方法、控制起始角度就变成扇形

                this.lineTo(x, y); //画外围线

                this.strokeStyle = "rgba(81,217,181,0.75)"; //外围线颜色

                this.lineWidth = lineWidth; //外围线粗

                this.fillStyle = grad; //对扇形颜色设置

                this.stroke();

                this.fill(); //填充

                this.closePath();

            }

        }

        function show() {

            draw(); //调用定义好的绘制方法

            ctx.sector(100, 150, 50, 30, 165, 235, '#FF82C6', 1.5); //绘制扇形

            ctx.sector(100, 150, 50, 30, 65, 135, '#FF82C6', 1.5);

            ctx.circle(100, 150, 10, '#FFFF00'); //绘制圆心

        }

        window.onload(show())

    </script>

</body>

</html>

drawSector.js

③。加上随机颜色函数

效果：

核心代码

<!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>Document</title>

</head>

<body>

    <div style="height: 100px"></div>

    <div style="text-align: center">

        <canvas id="myCanvas" style="border: 1px solid gray;background-color: lightblue" width="600" height="400">

    </canvas>

    </div>

    <script>

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

        var ctx = canvas.getContext('2d');

        function draw() {

            //定义绘制圆心的方法

            CanvasRenderingContext2D.prototype.circle = function(x, y, raidus, color) {

                this.beginPath();

                this.arc(x, y, raidus, 0, Math.PI * 2, false); //x:坐标点x;y:坐标点y;raidus:圆半径;0:起点角度;Math.PI*2:终点角度;false:非逆时针

                this.closePath();

                this.fillStyle = color; // 填充颜色;

                this.fill(); //对图形进行填充

            }

            //定义绘制扇形的方法

            CanvasRenderingContext2D.prototype.sector = function(x, y, radius, innerR, sDeg, eDeg, color, lineWidth) {

                const DEG = Math.PI / 180;

                var grad = this.createRadialGradient(x, y, 1, x, y, radius + radius); //定义一个渐变色

                grad.addColorStop(0, 'rgba(255,255,255,255)'); //从白色圆心处渐变出来

                grad.addColorStop(1, color); //渐变出传入颜色

                this.beginPath();

                this.moveTo(x, y);

                this.arc(x, y, radius, DEG * sDeg, DEG * eDeg, false); //画圆同方法、控制起始角度就变成扇形

                this.lineTo(x, y); //画外围线

                this.strokeStyle = "rgba(81,217,181,0.75)"; //外围线颜色

                this.lineWidth = lineWidth; //外围线粗

                this.fillStyle = grad; //对扇形颜色设置

                this.stroke();

                this.fill(); //填充

                this.closePath();

            }

        }

        //颜色随机方法

        function getColor() {

            var arr = [];

            i = 0;

            C = '0123456789ABCDEF'; //定义颜色代码的字符串

            //C = '01A23B45C67D89EF';

            while (i++ < 6) {

                x = Math.random() * 16; //取0-16之间的随机数给变量x

                b = parseInt(x); //取0-16之前的整数给变量b

                c = C.substr(b, 1); //由第b（0-16之间的整数）位开始取一个字符

                arr.push(c);

            }

            var cl = "#" + arr.join(''); //去掉之前数组之间的逗号，前面再加一个井号

            return cl;

        }

        function show() {

            draw(); //调用定义好的绘制方法

            var col = getColor(); //调用随机颜色

            ctx.sector(100, 150, 50, 30, 165, 235, '#FF82C6', 1.5); //绘制扇形

            ctx.sector(100, 150, 50, 30, 65, 135, '#FF82C6', 1.5);

            ctx.sector(100, 150, 50, 30, 0, 45, col, 1.5); //绘制随机颜色扇形

            ctx.circle(100, 150, 10, '#FFFF00'); //绘制圆心

        }

        window.onload(show())

    </script>

</body>

</html>

drawRandomColor.js

④。完整代码

在上面的基础上、再加一个循环来绘制花瓣、即得到了“七色花”的效果啦、具体看代码咯

<!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>Document</title>

</head>

<body>

    <div style="height: 100px"></div>

    <div style="text-align: center">

        <canvas id="myCanvas" style="border: 1px solid gray;background-color: lightblue" width="600" height="400">

    </canvas>

    </div>

    <script>

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

        var ctx = canvas.getContext('2d');

        function draw() {

            //定义绘制圆心的方法

            CanvasRenderingContext2D.prototype.circle = function(x, y, raidus, color) {

                this.beginPath();

                this.arc(x, y, raidus, 0, Math.PI * 2, false); //x:坐标点x;y:坐标点y;raidus:圆半径;0:起点角度;Math.PI*2:终点角度;false:非逆时针

                this.closePath();

                this.fillStyle = color; // 填充颜色;

                this.fill(); //对图形进行填充

            }

            //定义绘制扇形的方法

            CanvasRenderingContext2D.prototype.sector = function(x, y, radius, innerR, sDeg, eDeg, color, lineWidth) {

                const DEG = Math.PI / 180;

                var grad = this.createRadialGradient(x, y, 1, x, y, radius + radius); //定义一个渐变色

                grad.addColorStop(0, 'rgba(255,255,255,255)'); //从白色圆心处渐变出来

                grad.addColorStop(1, color); //渐变出传入颜色

                this.beginPath();

                this.moveTo(x, y);

                this.arc(x, y, radius, DEG * sDeg, DEG * eDeg, false); //画圆同方法、控制起始角度就变成扇形

                this.lineTo(x, y); //画外围线

                this.strokeStyle = "rgba(81,217,181,0.75)"; //外围线颜色

                this.lineWidth = lineWidth; //外围线粗

                this.fillStyle = grad; //对扇形颜色设置

                this.stroke();

                this.fill(); //填充

                this.closePath();

            }

        }

        //颜色随机方法

        function getColor() {

            var arr = [];

            i = 0;

            C = '0123456789ABCDEF'; //定义颜色代码的字符串

            //C = '01A23B45C67D89EF';

            while (i++ < 6) {

                x = Math.random() * 16; //取0-16之间的随机数给变量x

                b = parseInt(x); //取0-16之前的整数给变量b

                c = C.substr(b, 1); //由第b（0-16之间的整数）位开始取一个字符

                arr.push(c);

            }

            var cl = "#" + arr.join(''); //去掉之前数组之间的逗号，前面再加一个井号

            return cl;

        }

        function show() {

            draw(); //调用定义好的绘制方法

            var col = getColor(); //调用随机颜色

            ctx.sector(100, 150, 50, 30, 165, 235, '#FF82C6', 1.5); //绘制扇形

            ctx.sector(100, 150, 50, 30, 65, 135, '#FF82C6', 1.5);

            ctx.sector(100, 150, 50, 30, 0, 45, col, 1.5); //绘制随机颜色扇形

            ctx.circle(100, 150, 10, '#FFFF00'); //绘制圆心

            //绘制七色花

            var ii = 0;

            while (ii++ < 7) {

                var c = getColor();

                ctx.sector(250, 200, 40, 30, ii * 50, ii * 50 + 30, c, 1.5);

            }

            ctx.circle(250, 200, 7, '#FFFF00');

        }

        window.onload(show())

    </script>

</body>

</html>

canvasDraw.js

canvas绘制圆心扇形可组成颜色随机的七色小花的更多相关文章

  1. 使用 HTML5 canvas 绘制精美的图形

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...

  2. HTML5 canvas 绘制精美的图形

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...

  3. canvas绘制一定数目的圆(均分)

    绘制多圆 2016年5月24日12:12:26 绘制一定数目(num)颜色随机的小圆,围成一个大圆.根据num完全自动生成,且小圆自动均分大圆路径(num≥20). 效果: 前置技能:(1).Canv ...

  4. canvas绘制太阳系

    原文地址:http://jeffzhong.space/2017/10/26/solar/ 学习canvas有一段时间了,顺便写个小项目练手,该项目用到的知识点包括: ES6面向对象 基本的三角函数 ...

  5. java-js知识库之二——canvas绘制炫彩气泡

    现在使用canvas绘制气泡,虽说很多人都已经实现过了,可能方法都大同小异,但自己写和看别人写完全是两码事,自己会写的才是自己的,话不多说,直接上代码. 先来一张效果图: 现在上代码,代码有详细的注释 ...

  6. Canvas学习：封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  7. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  8. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  9. 使用Canvas绘制图形的基本教程

    原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

随机推荐

  1. Java飞机大战源代码

    刚学不久java,做了一个飞机大战的小小小小游戏,现在把这个思路总结以及代码分享出来.大佬别吐槽(emmmmmm .....开发环境:jdk1.7 开发工具:eclipese PlanelJPanel ...

  2. Redis这些知识点，是必须知道的！

    Redis是一个开源(BSD许可)的内存数据结构存储,可作为数据库,缓存和消息队列.相比Memcached它支持更多的数据结构,如string(字符串),hash(哈希),list(链表),set(集 ...

  3. linux --> 动态库和静态库

    库的分类 根据链接时期的不同,库分为静态库和动态库之分. 静态库:在链接阶段被链接的,生成的可执行文件就不受库的影响了,即使库被删除了,程序依然可以成功运行. 动态库:在程序执行的时候被链接的,即使程 ...

  4. js前端读写文件的方法（json、excel）

    1.前端读取文件的实现 关键:利用文件上传对话框预览本地文件.利用FileReader读取文件 前端预览本地文件 <input tabindex="-1" id=" ...

  5. Oracle profile 使用技巧

    给scott用户分配一个profile要求如下: 1.尝试登录的次数最多4次: 2.如果4次输入错误,则锁定该用户2天: 3.密码每隔5天修改一次,宽限期为2天: 答: SQL>conn sys ...

  6. 漫谈Java IO之 NIO那些事儿

    前面一篇中已经介绍了基本IO的使用以及最简单的阻塞服务器的例子,本篇就来介绍下NIO的相关内容,前面的分享可以参考目录: 网络IO的基本知识与概念 普通IO以及BIO服务器 NIO的使用与服务器Hel ...

  7. 第1次作业：小菜鸟的平凡IT梦

    #1.结缘计算机的始末 ##1.1与计算机相识的几年 作为一个95后,出生在一个互联网开始兴盛的时代.我记得小学的时候,开始知道电脑这个东西,学校有了机房,开始有了所谓的电脑课.那时候计算机对于我来说 ...

  8. Flask 学习 七 用户认证

    使用werkzeug 实现密码散列 from werkzeug.security import generate_password_hash,check_password_hash class Use ...

  9. vue初尝试--组件

    github代码同步网址 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添 ...

  10. j2ee基础（1）servlet的生命周期

    Servlet的生命周期 Servlet 生命周期规定了 Servlet 如何被加载.实例化.初始化. 处理客户端请求,以及何时结束服务. 该生命周期可以通过 javax.servlet.Servle ...