Canvas 初试 先画个萌萌的五角星
引言: css 动画和 Canvas 让我们可以做很多有趣的东西,前面用过css 动画做过简单的挂图和一些 翻页广告,这次学习Canvas 可以用来画图啦。很简单的入门之作,直接上代码,平时忘记了还可以看一看提醒自己。不得不说刚刚入门,最近我的学习碰到的最大困难就是,学的东西在慢慢忘记。ε=(´ο`*)))唉
<div class="app">
<canvas id="canvas" width="800px" height="800px" style="border: 1px solid black"></canvas>
</div>
<script>
window.onload=function () {
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
darw(context, 100, 150, 400,400 ,30);
function darw(ctx, r, R, x, y ,deg) {// deg 图片旋转角度
context.beginPath();
for (var i=0;i<5;i++){
context.lineTo(Math.cos((18+i*72-deg)/180*Math.PI)*R+x,
-Math.sin((18+i*72-deg)/180*Math.PI)*R+y) ;
context.lineTo(Math.cos((54+i*72-deg)/180*Math.PI)*r+x,
-Math.sin((54+i*72-deg)/180*Math.PI)*r+y);
}
}
context.closePath();
context.fillStyle='yellow';
context.fill();
context.lineWidth=10;
/* context.lineJoin='round'*/
context.lineCap='square' // butt round square
//context.miterLimit=10;
// context.lineJoin='miter'
context.stroke();
}
这些注释的都是Canvas 初试常用的属性,感觉还是要记住思路怎么用。
ps : 画五角星比较难的还是这个数值计算,说起来Canvas刚上手,让我的感觉就是,这个位置的计算真的有些困难。