通过html5来绘一棵简单的树!~(填充样式之后)

通过html5来绘一棵简单的树!~(填充样式之后)

<!DOCTYPE HTML>
<html>
<head>
<title>canvas的宽和高的测试1</title>

<script>
function draw(){
var canvas=document.getElementById(“my”);
var context=canvas.getContext(“2d”);
//保存当前的绘画状态

//向右下方移动绘图上下文
context.translate(140,250);
context.save();
//绘图

createConopyPath(context);
context.lineWidth=4;
context.lineJoin=”round”;
context.strokeStyle=”red”;
context.fillStyle=”green”;
context.fill();
context.stroke();

context.restore();
}

function createConopyPath(context){
context.beginPath();
context.moveTo(-25,-50);
context.lineTo(-10,-80);
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
context.lineTo(0,-140);
context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);
context.closePath();

}

window.addEventListener(“load”,draw,true);
</script>
</head>

<body>
<canvas id=”my” width=”300″ height=”300″ style=”border:solid 1px red;”></canvas>
</body>
</html>

查看效果:http://www.cangzhang.com/wp-content/uploads/2012/08/translate3.htm

共有 1 条评论

Top