手机版

主页 > 文库下载 > 实用文档 > 内容

HTML5canvas绘制花朵

时间：2025-07-14 来源：未知

小中大

字号：

<!DOCTYPE HTML>

<html>

<head>

<title>MyFlower</title>

canvas{

width:800px;

height:800px;

border:1px solid red;

}

</style>

function Draw()

{

var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d");

context.translate(200,0);

//context.scale(0.5,0.5);

var i;

/*for(i=1;i<=24;i++)

{

context.rotate(Math.PI/6);

drawflower(context);

}*/

drawflower1(context);

drawflower2(context);

drawflower3(context);

drawflower4(context);

drawflower5(context);

drawline(context);

}

function drawflower1(context)

{

context.beginPath();

context.moveTo(200,400);

context.bezierCurveTo(250,380,300,350,400,420);

context.strokeStyle="pink"; // ñ context.lineWidth=3;

context.fillStyle="pink";

context.fill();

context.stroke();

context.beginPath();

context.moveTo(200,400);

context.bezierCurveTo(250,420,300,450,400,420);

context.strokeStyle="pink";

context.linewidth=3;

context.fillStyle="pink";

context.fill();

context.stroke();

}

function drawflower2(context)

{

context.beginPath();

context.moveTo(200,400);

context.bezierCurveTo(200,400,320,400,320,280);

context.strokeStyle="pink"; // ñ context.lineWidth=3;

context.fillStyle="pink";

context.fill();

context.stroke();

context.beginPath();

context.moveTo(200,400);

context.bezierCurveTo(200,340,260,300,320,280);

context.strokeStyle="pink";

context.linewidth=3;

context.fillStyle="pink";

context.fill();

context.stroke();

}

function drawflower3(context)

{

context.beginPath();

context.moveTo(200,400);

context.bezierCurveTo(280,400,300,450,290,520);

context.strokeStyle="pink"; // ñ context.lineWidth=3;

context.fillStyle="pink";

context.fill();

context.stroke();

context.beginPath();

context.moveTo(200,400);

context.bezierCurveTo(200,450,200,480,290,520);

context.strokeStyle="pink";

context.linewidth=3;

context.fillStyle="pink";

context.fill();

context.stroke();

}

function drawflower4(context)

{

context.beginPath();

context.moveTo(200,400);

context.bezierCurveTo(250,380,220,320,120,280);

context.strokeStyle="pink"; // ñ context.lineWidth=3;

context.fillStyle="pink";

context.fill();

context.stroke();

context.beginPath();

context.moveTo(200,400);

context.bezierCurveTo(100,380,140,340,120,280);

context.strokeStyle="pink";

context.linewidth=3;

context.fillStyle="pink";

context.fill();

context.stroke();

}

function drawflower5(context)

{

context.beginPath();

context.moveTo(200,400);

context.bezierCurveTo(250,420,200,480,80,480);

context.strokeStyle="pink"; // ñ context.lineWidth=3;

context.fillStyle="pink";

context.fill();

context.stroke();

context.beginPath();

context.moveTo(200,400);

context.bezierCurveTo(150,400,100,400,80,480);

context.strokeStyle="pink";

context.linewidth=3;

context.fillStyle="pink";

context.fill();

context.stroke();

}

function drawline(context)

{

context.beginPath();

context.moveTo(200,450);

context.bezierCurveTo(160,470,130,550,220,650); context.strokeStyle="green";

context.lineWidth=3;

context.stroke();

}

window.addEventListener("load", Draw,true); </script>

</head>

<body>

</canvas> </body> </html>

…… 此处隐藏：1023字，全部文档内容请下载后查看。喜欢就下载吧 ……

HTML5canvas绘制花朵.doc 将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印

下载这篇word文档

上一篇：中科矿业 2014年年报

下一篇：日本烧结钕铁硼磁体成型烧结技术

×

二维码

相

关

文

章

分类导航

幼儿教育小学教育初中教育教学研究专业资料资格考试教育文库外语考试高等教育求职职场高中教育实用文档

今日头条

1

有多少爱转身即成陌路

每日精选

猜你喜欢

HTML5canvas绘制花朵

分类导航

今日头条

每日精选

猜你喜欢

精彩图片

2020教师资格幼儿保教知识与能力考前冲刺题及答

未成年工不得从事哪些劳动

有多少爱转身即成陌路

未来在自己手中——读《心愿》有感

热门标签

HTML5canvas绘制花朵

推荐阅读

分类导航

今日头条

每日精选

猜你喜欢

精彩图片

2020教师资格幼儿保教知识与能力考前冲刺题及答

未成年工不得从事哪些劳动

有多少爱转身即成陌路

未来在自己手中——读《心愿》有感

热门标签