使用Javascript和Canvas复制绘图
使用Javascript和Canvas复制绘图
提问于 2018-10-26 04:23:19
我想画一个“花”在多条线，根据用户想要的数字。我已经有了创建椭圆的代码(由老师给出)，然后是一朵花，我希望得到以下结果：
我想要的结果是：
在此示例中，用户选择连续绘制14朵花。
椭圆代码：
/**
Drawing an ellipse in the Canvas
* @param {CanvasRenderingContext2D} ctx
* @param {number} cx abscissa
* @param {number} cy ordinate
* @param {number} rx radius
* @param {number} ry vertical radius
* @param {number} angle the angle on degrees of the ellipse from the horizontale
* @param {string} style Colour of the shape
*/
function ellipse(ctx, cx, cy, rx, ry, angle, style) {
ctx.save(); // save the initial context
ctx.beginPath();
ctx.translate(cx, cy);
ctx.rotate(angle * Math.PI / 180);
ctx.scale(rx, ry);
ctx.arc(0, 0, 1, 0, 2 * Math.PI, false);
ctx.restore(); // restore the original state of the context
ctx.save();
if (style) {
ctx.strokeStyle = style;
}
ctx.stroke();
ctx.restore();
}
function Flower() {
let i = 0;
while (i < 10) {
ellipse(ctx, 300, 300, 200, 40, 30 * i, 'red');
i++;
}
}
回答 1
Stack Overflow用户
发布于 2018-10-26 05:37:08
您可以调用2while循环来绘制花朵的数量。我已经使用您的代码创建了示例代码片段，它将随机创建花朵。
请看下面的代码片段：
/**
Drawing an ellipse in the Canvas
* @param {CanvasRenderingContext2D} ctx
* @param {number} cx abscissa
* @param {number} cy ordinate
* @param {number} rx radius
* @param {number} ry vertical radius
* @param {number} angle the angle on degrees of the ellipse from the horizontale
* @param {string} style Colour of the shape
*/
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
function ellipse(ctx, cx, cy, rx, ry, angle, style) {
ctx.save(); // save the initial context
ctx.beginPath();
ctx.translate(cx, cy);
ctx.rotate(angle * Math.PI / 180);
ctx.scale(rx, ry);
ctx.arc(0, 0, 1, 0, 2 * Math.PI, false);
ctx.restore(); // restore the original state of the context
ctx.save();
if (style) {
ctx.strokeStyle = style;
}
ctx.stroke();
ctx.restore();
}
function Flower(x,y) {
let i = 0;
while (i < 6) {
ellipse(ctx, 20 * x, 20 * y, 18, 2, 30 * i, 'red');
i++;
}
}
function drawFlower(xnum, ynum){
let x = 1;
let y = 1;
while(y < xnum * 2){
while (x < ynum * 2){
Flower(x, y);
x+=2;
}
x = 1;
y+=2;
}
}
document.getElementById("drawFlowers").addEventListener("click", function (){
ctx.clearRect(0,0,600,600);
ctx.fillStyle = "#E0FFFF";
ctx.fillRect(0, 0, 600,600);
drawFlower(Math.random() * (14 - 1) + 1, Math.random() * (14 - 1) + 1);
})<div id="input">
<button id="drawFlowers">
Draw Flowers
</button>
</div>
<div>
<canvas id="canvas" width="600" height="600"></canvas>
</div>
你也可以通过here来测试它
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52997541
复制相关文章
相似问题