HTML5 中用CANVAS画一个五角星,代码如下:
<script type="text/javascript">
function init() {
var ctx = document.getElementById('stars').getContext('2d');
ctx.fillStyle = "#827839";
ctx.shadowColor="#000000";
ctx.shadowOffsetX=6;
ctx.shadowOffsetY=6;
ctx.shadowBlur=9;
ctx.beginPath();
ctx.moveTo(15, 150);
ctx.lineTo(100,140);
ctx.lineTo(170,90);
ctx.lineTo(230,140);
ctx.lineTo(315,150);
ctx.lineTo(230,200);
ctx.lineTo(300,263);
ctx.lineTo(170,233);
ctx.lineTo(30,263);
ctx.lineTo(100,200);
ctx.closePath();
ctx.fill();
}
window.addEventListener('load', init, false);
</script>
<canvas id="stars" width="333" height="300">
Your browser does not support the canvas element .
</canvas>
分享到:
相关推荐
通过使用canvas的画线,移动,旋转,绘制出五角星图案。无需计算坐标点,通过五角星的特性,进行canvas的变换,就能实现。
2.8_用canvas画一个五角星|canvas线条的属性|Canvas图形、动画、游戏开发从入门到精通全系列课程
HTML5 Canvas五角星变换特效是一款html5基于canvas 2D画布自定义绘制酷炫的彩色五角星变换动画特效。
用canvas 画了五个五角星~~
html5 canvas绘制的一款五角星探照灯文字动画特效,通过自动放大缩小五角星形状显示探照灯区域。
html5 canvas画布绘制圆形时钟代码
android 画曲线图 画三角形(多边形),可以画成股票K线图,儿童成长曲线等,使用android的canvas
一个html5 canvas做的动画,效果是自动绘制一个网格
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果
主要介绍了详解Html5 Canvas画线有毛边解决方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
用HTML5 canvas画的幻灯片
HTML5五角星探照灯文字效果是一款HTML5基于canvas绘制五角星形状的探照灯文字,通过自动放大缩小显示区域效果。
canvas做的点击画布,鼠标移动,随鼠标移动,在鼠标周围(随机颜色、大小、方向、数量)绘制五角星,漂亮的游戏动画效果.
HTML5 Canvas 实现坠落的曳尾彩虹五角星动画效果源码.zip
js html5 canvas制作多个小球碰撞的动画效果 js html5 canvas制作多个小球碰撞的动画效果
HTML5 Canvas实现带模糊光晕背景的五角星粒子滤镜特效动画源码.zip
canvas拼图游戏,基于html + canvas画布实现
HTML5 使用canvas画布做小球回弹动画,使绘画出来的小球沿着矩形的轨迹进行对称回弹,代码简单易懂,适合初学者练习。