用html5中的canvas画出的三种菊花，书上看到的例子，拿来当联系玩。

使用Canvas元素绘制美丽的花朵

var context;

var A,n;

function btn_onclick(){

var width;

var height

var canvas;

var Xo,Yo;

var k;

canvas = document.getElementById("canvas");

width = canvas.width;

height = canvas.height;

context = canvas.getContext('2d');

Xo = width/2;

Yo = height/2;

k = parseInt(document.getElementById("drawType").value);

if(k == 2)

A = Yo*0.25;

else

A = Yo*0.75;

context.save();

context.clearRect(0,0,width,height);

context.translate(Xo,Yo);

context.beginPath();

for(var B=0;B<= 6.28;B=B+0.01){

draw(B);

}

context.closePath();

context.restore();

}

function draw(B){

var n = 10;

switch(parseInt(document.getElementById("drawType").value)){

case 3:

r = A*Math.sin(n*B)*Math.exp(-B/(20));

break;

case 2:

r = A*(Math.sin(n*B) + 3*Math.sin(3*n*B));

break;

case 1:

r=A*Math.sin(n*B);

}

x = r*Math.cos(B);

y = r*Math.sin(B);

context.fillStyle = "green";

context.strokeStyle = "black";

context.lineTo(-x,-y);

context.fill();

context.stroke();

}

使用Canvas绘制美丽的花朵

花的类型:

蓬莱菊

令箭荷花

大丽花

HTML菊花图案绘制,用HTML5中的canvas元素画菊花相关推荐

HTML5 中的canvas元素用于,HTML5中的Canvas元素
canvas 元素用于在网页上绘制图形. 什么是Canvas? HTML 5 的canvas元素使用JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas ...
html 绘制矩形,HTML5中使用canvas绘制矩形
canvas是HTML5中新增的一个元素,使用Canvas可以绘制任何你喜欢的图形.先来认识什么是Canvas? 1.在页面上放置一个canvas元素,就相当于在页面上放置了一块"画布&qu ...
html5平抛,第五讲：使用html5中的canvas动态画出物理学上平抛运动
平抛运动 var canvas = document.getElementById('mc'); var cxt = canvas.getContext('2d'); //定义一个小球 var bal ...
html a标签指定区域,第四讲：使用html5中的canvas标签画出一个球在指定区域内的运动...
小球在一个区域运动 var canvas = document.getElementById('mc'); var cxt = canvas.getContext('2d'); //定义一个小球 va ...
用html语言编写笑脸,怎么使用HTML5中的Canvas绘制笑脸
怎么使用HTML5中的Canvas绘制笑脸发布时间:2021-02-26 09:33:14 来源:亿速云阅读:75 作者:清风这篇"怎么使用HTML5中的Canvas绘制笑脸" ...
php代码输出笑脸,利用HTML5中的Canvas绘制笑脸的代码
这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下今天,你将学习一项称为Canvas(画布)的web技术,以及 ...
使用HTML5中的canvas绘制灰太狼图像
大家好,我是byoneself,本次将为大家分享一下使用HTML5中的canvas绘制一个灰太狼图像,希望对大家有所帮助. 下图是效果图: 以下就是实现的代码: <!DOCTYPE html&g ...
html5中用画布画小狗,HTML5中的Canvas（绘制）
Canvas中不仅可以画线(路径),还能画很多其他的图像,这一章就介绍Canvas的其他两种绘图API. 矩形我们在上一章只用线来画了一个矩形,其实可以一下子就画出来的,用下面函数: ctx.fil ...
HTML5中的canvas（画布）
HTML5中的canvas(画布) 1.关于canvas的简介 1.canvas是HTML5标签,表示画布,canvas只是作为图像绘制的容器,所有的绘制工作都在脚本JavaScript内部完成. 2 ...

HTML菊花图案绘制,用HTML5中的canvas元素画菊花

使用Canvas绘制美丽的花朵

HTML菊花图案绘制,用HTML5中的canvas元素画菊花相关推荐

最新文章

热门文章