疯狂讲义随笔——使用二次曲线quadraticCurveTo()画花朵

代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>Document</title><style>.div1{height:400px;border:1px solid black;position:relative;}#canvas{margin:0px auto;border:1px solid black;}</style>
</head>
<body><div class="div1"><canvas id="canvas" height="200" width="500"></canvas></div><script>var canvas=document.getElementById("canvas").getContext("2d");function createFlower(context,n,dx,dy,size,length){context.beginPath();context.moveTo(dx,dy+size);var dig=2*Math.PI/n;for(var i=1;i<n+1;i++){var ctrlX=Math.sin((i-0.5)*dig)*length+dx;var ctrlY=Math.cos((i-0.5)*dig)*length+dy;var x=Math.sin(i*dig)*size+dx;var y=Math.cos(i*dig)*size+dy;context.quadraticCurveTo(ctrlX,ctrlY,x,y);}context.closePath();}canvas.shadowBlur=4;canvas.shadowColor="gray";canvas.shadowOffsetX=6;canvas.shadowOffsetY=4;createFlower(canvas,5,70,100,30,80);canvas.fillStyle="#f00";canvas.fill();createFlower(canvas,6,200,100,30,80);canvas.fillStyle="#ff0";canvas.fill();createFlower(canvas,7,330,100,30,80);canvas.fillStyle="#f0f";canvas.fill();</script>
</body>
</html>

效果图如下所示：

疯狂讲义随笔——使用二次曲线quadraticCurveTo()画花朵相关推荐

《IOS疯狂讲义》雪花飘飘效果实现
最近在看<IOS疯狂讲义>这本书,看到最后里面有一个关于利用绘图和坐标变换实现雪花飘飘的效果,有点感兴趣,就按照书中的代码敲了一下,但是出来的效果和书中所说不太一样.所以把代码贴出来希望和 ...
怎么用python画花瓣_怎么用python画花朵
怎么用python画花朵?下面给大家讲解一下具体步骤: 第一步,打开菜单栏,输入idle,打开shell. 第二步,新建一个文件,并命名. 第三步,导入turtle模块,创建一个新窗口用于绘图,再创建 ...
尽信书，不如无书。java的包装类Integer的深入理解及特殊情况（以及java疯狂讲义第5版170页中的错误）
1.通常情况下,两个包装类型只有在两个引用指向同一对象时,使用 == 进行比较时才会返回true 例如: Double do1 = Double.valueOf(1.23); Double do2 = ...
python画花朵代码_python画花朵代码分享
python画花朵代码分享发布时间:2020-05-09 15:36:11 来源:亿速云阅读:295 作者:小新这篇文章主要为大家详细介绍了python画花朵代码,文中示例代码介绍的非常详细,具 ...
html5讲义,HTML5(H5)疯狂讲义
什么是H5? 万维网的核心语言,超级文本标记语言的第五次重大修订 H5有什么用? HTML5的设计目的是为了在移动设备上支持多媒体.新的语法特征被引进以支持这一点,如video.audio和canva ...
怎么用python画花朵代码_怎么用python画花朵
怎么用python画花朵?下面给大家讲解一下具体步骤: 第一步,打开菜单栏,输入idle,打开shell. 第二步,新建一个文件,并命名. 第三步,导入turtle模块,创建一个新窗口用于绘图,再创建 ...
python画简单花-怎么用python画花朵
怎么用python画花朵?下面给大家讲解一下具体步骤: 第一步,打开菜单栏,输入idle,打开shell. 第二步,新建一个文件,并命名. 第三步,导入turtle模块,创建一个新窗口用于绘图,再创建 ...
用python画花瓣-怎么用python画花朵
怎么用python画花朵?下面给大家讲解一下具体步骤: 第一步,打开菜单栏,输入idle,打开shell. 第二步,新建一个文件,并命名. 第三步,导入turtle模块,创建一个新窗口用于绘图,再创建 ...
《Think Python》练习 4-2：用函数画花朵
第4章案例研究:接口设计练习 4-2 用函数画花朵写一组合适的通用函数,用来画出下图所示的花朵图案(最终代码执行效果图): [求解] Step.1 确认组件如果想通过本张介绍的多边线 poly ...

疯狂讲义随笔——使用二次曲线quadraticCurveTo()画花朵

疯狂讲义随笔——使用二次曲线quadraticCurveTo()画花朵相关推荐

最新文章

热门文章