`

canvas旋转n角星

阅读更多

<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进行基本的绘图操作,包括画线、位移和旋转,以及如何巧妙地绘制出五角星图案。无需复杂的数学计算,只需理解Canvas的基本变换原理,你就可以轻松实现这一目标。 首先,Canvas提供...

    HTML5 Canvas五角星变换特效.zip

    3. **旋转与缩放**:利用`transform()`或`rotate()`、`scale()`方法改变五角星的旋转角度和大小,形成旋转、缩放的动画。 4. **路径操作**:可以对五角星的路径进行动态修改,比如平移、扭曲等,进一步增加视觉效果...

    js+canvas绘制五角星的方法.docx

    js+canvas 绘制五角星的方法 js+canvas 绘制五角星的方法主要介绍了使用 JavaScript 调用 canvas 组件结合数学运算绘制图形的相关技巧。下面将详细介绍该方法的实现步骤和相关概念。 JavaScript 和 Canvas 组件 ...

    canvas 原位置旋转图片

    本文将详细讲解如何在Canvas上实现原位置旋转图片,并通过`translate`和`rotate`两个关键方法来理解这一过程。 首先,我们需要创建一个Canvas元素并在HTML中插入它: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;Canvas ...

    canvas图片旋转自适应容器宽度实践

    本实践主要探讨的是如何使用Canvas实现图片的旋转,并在每次旋转90度后自动调整宽度以适应容器,保持等比缩放,确保图片不失真。 首先,我们需要在HTML中创建一个`&lt;canvas&gt;`元素,并设置其宽度和高度,以及关联一个...

    canvas 绘制五角星红旗

    用canvas 画了五个五角星~~

    html5 canvas页面滚动背景图片旋转动画特效

    在这个特定的场景中,我们讨论的是如何使用Canvas实现页面滚动时背景图片的旋转动画特效。这样的效果可以增加网页的视觉吸引力,为用户带来更生动的浏览体验。 首先,我们要了解Canvas的基本用法。Canvas是一个HTML...

    canvas 绘制旋转直线

    "canvas 绘制旋转直线"这个主题聚焦于如何利用Canvas API来绘制一条带有旋转角度的直线。以下是对这个知识点的详细阐述: 1) **Canvas绘图基础** Canvas是一个基于矢量图形的二维画布,它通过JavaScript来控制图形...

    canvas旋转小球源码.html

    对应我canvas旋转小球这篇博客

    HTML5 Canvas 旋转的3D立方体动画.rar

    HTML5 Canvas 旋转的3D立方体动画,有纵深感的旋转立方体,渲染的很不错,旋转的动画效果流畅,十分不错,是研究HTML5 Canvas技术的好范例。经测试,IE11兼容,火狐或Chrome、Opera等都有完美表现。

    js+canvas绘制五角星的方法

    本篇文章将深入探讨如何使用JavaScript调用Canvas API来绘制五角星。五角星的绘制涉及到数学原理,尤其是三角函数,如正弦和余弦,以及循环和路径构建。 首先,我们需要一个HTML页面,其中包含一个`&lt;canvas&gt;`元素,...

    html5 canvas炫酷旋转银河系星空背景特效

    接下来,我们讨论一下如何在Canvas上实现旋转效果。HTML5 Canvas提供了一个叫做`rotate()`的方法,它可以改变当前的绘图坐标系统,使其沿着指定的角度进行旋转。通过在每次绘制星星之前调用`rotate()`,并随着时间...

    使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码

    在这个示例中,我们将深入探讨如何利用canvas进行图片的裁剪、旋转和缩放操作。 首先,我们需要在HTML文件中创建一个canvas元素,并通过JavaScript获取到这个元素的2D渲染上下文。在HTML部分,可以这样设置: ```...

    HTML5 Canvas旋转文本动画

    Canvas API提供了一个名为`context.rotate()`的方法,用于改变当前坐标系的旋转角度。它的参数是一个弧度值,可以使用`Math.PI * angle / 180`将角度转换为弧度。例如,`context.rotate(Math.PI / 2)`会将坐标系旋转...

    幻灯片插件 canvas 3D旋转木马

    本项目涉及的是一个基于Canvas技术的幻灯片插件,它利用3D旋转来实现独特的展示效果,给用户带来更为生动和交互性的体验。 Canvas是HTML5中的一个重要元素,它提供了一个在浏览器中绘制图形的画布。通过JavaScript...

    canvas粒子旋转动画.zip

    本示例中的"canvas粒子旋转动画.zip"是一个基于HTML5 Canvas技术的JavaScript特效,它实现了类似龙卷风的粒子旋转效果,用户可以进行自定义调节,以创造出独特的视觉体验。 Canvas是HTML5的一个重要组成部分,它...

    HTML5 Canvas三维立体的旋转物体动画

    "HTML5 Canvas三维立体的旋转物体动画"这个主题涉及到的是利用Canvas API来实现三维空间中的物体旋转效果,这在游戏、数据可视化、用户界面设计等领域有广泛应用。 Canvas API提供了基础的绘图命令,如画线、填充...

    android 使用canvas把矩形图片变成圆角矩形显示

    这通常涉及到自定义View或者ImageView的使用,以及Canvas的绘图技术。下面我们将详细探讨如何实现这个功能。 首先,我们要了解Android的Canvas。Canvas是Android系统提供的一个用于绘制2D图形的对象,它可以对...

    canvas-旋转星空动态特效

    基于canvas的动态旋转星空特效,直接用浏览器打开就能看

Global site tag (gtag.js) - Google Analytics