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

在上一篇文章中,我们画出了一棵简单的树,但是我们看到颜色都是黑色,能不能改变呢?其实是可以的,canvas里面有一些控制的样式的方法 ,现在我们就来试一试!~

输入代码:

<!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.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://gagahtml-wordpress.stor.sinaapp.com/uploads/2012/05/translate2.html

共有 1 条评论

Top