【转载】html5+canvas+js实现图形翻转和文字翻转与竖排

代码如下:

<!DOCTYPE HTML>

<html>

<head>

<script language=”javascript”>

function drawBowtie(ctx, fillStyle) {

ctx.fillStyle = ”rgba(200,200,200,0.3)”;

ctx.fillRect(-30, -30, 60, 60);

ctx.fillStyle = fillStyle;

ctx.globalAlpha = 1.0;

ctx.beginPath();

ctx.moveTo(25, 25);

ctx.lineTo(-25, -25);

ctx.lineTo(25, -25);

ctx.lineTo(-25, 25);

ctx.closePath();

ctx.strokeText(“2012″,-15,5);

ctx.fill();

 

}

function dot(ctx) {

ctx.save();

ctx.fillStyle = ”black”;

ctx.fillRect(-2, -2, 4, 4);

ctx.restore();

}

 

function draw() {

var ctx = document.getElementByIdx_x(‘myCanvas’).getContext(“2d”);

// note that all other translates are relative to this

// one

ctx.translate(100, 100);

 

ctx.save();

ctx.translate(0, 0); // unnecessary

drawBowtie(ctx, ”red”);

dot(ctx);

ctx.restore();

 

ctx.save();

ctx.translate(100, 0);

ctx.rotate(90 * Math.PI / 180);

drawBowtie(ctx, ”green”);

dot(ctx);

ctx.restore();

 

ctx.save();

ctx.translate(0, 100);

ctx.rotate(135 * Math.PI / 180);

drawBowtie(ctx, ”blue”);

dot(ctx);

ctx.restore();

 

ctx.save();

ctx.translate(100, 100);

ctx.rotate(90 * Math.PI / 180);

drawBowtie(ctx, ”yellow”);

dot(ctx);

ctx.restore();

}

window.onload=function(){

draw();

}

</script>

</head>

<body>

<div id=”pw_body” style=”width:100%;height:100%”>

<canvas id=”myCanvas” width=”300″ height=”300″></canvas>

<script type=”text/javascript” src=” http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js“></script>

</div>

</body>

</html>

效果图如下:

【转载】html5+canvas+js实现图形翻转和文字翻转与竖排_第1张图片

出自: http://blog.sina.com.cn/s/blog_71261a2d01010nh3.html

你可能感兴趣的:(html5,技术博文)