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年年报

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

精彩图片

大家正在看

新人教版2018小学五年级下册数学机关阅览室借阅制度初三英语教学反思桐梓县达昌中学鲜花采购合同(榀梵) 煤矿安全规程(2011版)(带注释) 高一化学上册知识点(全) 《中国教育史》考试复习笔记(代毕业论文过程控制材料

HTML5canvas绘制花朵

精彩图片

猜你喜欢

热门精选

经典双语美文：加油为了心中的梦想

美文赏析：花开向暖，素锦留香

经典美文：花开向暖，素锦留香

经典美文：青春如歌，携一份懂得同行

在雨中静听自己的心跳美文

浅谈当今大学教育的含金量双语美文

大家正在看