HTML5——Canvas_06之【绘制变形图形】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >

< head >
< meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" >
< title >绘制变形图形 </ title >
< script >
function draw( id)
{
var canvas= document. getElementById( id);
if( canvas== null)
{
return false;
}
var context= canvas. getContext( "2d");
context. fillStyle= "eeeeef";
context. fillRext( 0, 0, 500, 500);
content. translate( 200, 50); //变形
context. fillStyle= "rgba(255,0,0,0.25)";
for( var i<0; i< 50; i++)
{
content. translate( 25, 25);
context. scale( 0.95, 0.95);
context. rotate( Math.PI/ 10);
content. fillRext( 0, 0, 100, 50);
}

}
</ script >
</ head >

< body onload= "draw(" canvas ");" >
< canvas id= "canvas" width= "500" height= "500" ></ canvas >
</ body >

</ html >

猜你喜欢

转载自blog.csdn.net/Superstatus/article/details/80566110
今日推荐