<canvas id="canv1"></canvas>
!function(id){
var canvas=document.getElementById(id);
canvas.width=800;
canvas.height=600;
var context=canvas.getContext('2d');
context.fillStyle='#eef';
context.fillRect(0,0,800,600);
context.translate(300,80);
context.fillStyle='rgba(255,0,0,0.25)';
context.shadowOffsetY=5;
context.shadowOffsetX=5;
context.shadowColor='rgba(0,0,0,.75)';
context.shadowBlur=7.5;
for(var i=0;i<70;i++){
context.translate(25,25);
context.scale(.95,.95);
context.rotate(Math.PI/10);
createStars(context,13);
context.fill();
}
//创建n角形
function createStars(context,n){
context.beginPath();
context.fillStyle='rgba(255,0,0,.25)';
var x,y;
var dig=n%2==0?Math.PI/n*(n-2):Math.PI/n*(n-1);
for(var i=0;i<n;i++){
x=Math.sin(i*dig);
y=Math.cos(i*dig);
context.lineTo(200+x*50,50+y*50);
}
context.closePath();
}
}('canv2')
- 大小: 99 KB
分享到:
相关推荐
通过使用canvas的画线,移动,旋转,绘制出五角星图案。无需计算坐标点,通过五角星的特性,进行canvas的变换,就能实现。
HTML5 Canvas五角星变换特效是一款html5基于canvas 2D画布自定义绘制酷炫的彩色五角星变换动画特效。
canvas图片旋转,每次顺时针或逆时针旋转90度后,宽度自适应容器宽度,等比缩放
用canvas 画了五个五角星~~
js+canvas绘制五角星的方法.docx
对应我canvas旋转小球这篇博客
如果不经过处理,在原点旋转的图片就看不到了。这里使用translate对原点进行移动,然后再旋转。这样就可以实现在原位置旋转图片了。代码一看就会。完整注释
HTML5 Canvas 旋转的3D立方体动画,有纵深感的旋转立方体,渲染的很不错,旋转的动画效果流畅,十分不错,是研究HTML5 Canvas技术的好范例。经测试,IE11兼容,火狐或Chrome、Opera等都有完美表现。
主要介绍了js+canvas绘制五角星的方法,涉及JavaScript调用canvas组件结合数学运算绘制图形的相关技巧,需要的朋友可以参考下
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
Canvas 3D旋转地球Canvas 3D旋转地球Canvas 3D旋转地球
canvas粒子旋转动画是一款类似龙卷风旋转特效。可调节
js 幻灯片插件 canvas 3D旋转
1)canvas 绘制圆环 绘制带有旋转角度的直线 2)详细介绍看注释
基于canvas的动态旋转星空特效,直接用浏览器打开就能看
javascript - Canvas动画- 太空星球运动
字体绕中心一圈的写法,欢迎js初学者来下载。
1、html5 2、地球旋转 3、canvas
博文《 Android画布canvas rotate,translate的理解》http://blog.csdn.net/peak1chen/article/details/50776507demo下载链接