canvas 的五角星

最新推荐文章于 2024-01-18 10:25:59 发布
最新推荐文章于 2024-01-18 10:25:59 发布
阅读量141 收藏
点赞数
分类专栏： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laxexue/article/details/84581997
版权 
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;"></canvas>
</body>
</html>
<script>
	window.onload = function(){
		var canvas = document.getElementById('canvas');
		var context = canvas.getContext('2d');

		canvas.width = 800;
		canvas.height = 800;

		drawStar(context,150,300,400,400,30);
		context.lineWith = 10;
		
	}
	function drawStar(cxt,r,R,x,y,rot){
		cxt.beginPath();
		for (var i = 0; i < 5; i++) {
			cxt.lineTo(Math.cos((18+i*72 -rot)/180*Math.PI)*R+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
			cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
			
		}
		
		cxt.closePath();
		cxt.stroke();
	}
</script>

 

laxexue
关注
专栏目录
html5绘制随机五角星_利用html5画出五角星画出星空
weixin_35300124的博客
12-23 622
源代码：window.onload = function(){var canvas = document.getElementById("canvas");var context=canvas.getContext("2d");//绘制和画布一样大小的黑色矩形context.fillStyle = "black";context.fillRect(0,0,canvas.width,canvas.h...
Canvas 画五角星
destiny'Note
11-30 5756
前言学习 canvas，更多的是需要动手实践，下面就从一个相对简单的例子：五角星开始吧！ 不懂 canvas 的同学，请先学习：Canvas 画布 一、几何模型由上图可以清晰的得到大概的思路，大圆和小圆上的点相间相连，就可以的到五角星。 我的做法是从右下角开始画。因为 canvas 的坐标系的第一象限，实际上是右下角，而不是右上角。这样，就可以避免纠结于 sin() 和 cos()
HTML5-画一个简单五角星
紫晶花园-计算机技术分园
03-30 6030
HTML5-画一个简单五角星 Your browser does not support the canvas element.
利用html5画出五角星画出星空
YY_雅丽快跑
11-17 4999
利用html5画出五角星 （在慕课网 ）
html5-canvas绘图功能绘制五角星
candy755的博客
09-12 9848
我先简单的介绍下HTML5 新增的canvas标签， canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下图是基本绘制的步骤，需要注意的是:Internet Explorer 8 及更早 IE 版本的浏览器不支持 &lt;canvas&gt; 标记。 现在我将利用这...
canvas绘制五角星
xm2by的博客
02-18 5211
canvas绘制五角星 在canvas中绘制五角星，主要是利用canvas中path（路径）来绘制，首先确定五角星上A到J这10个点的坐标，如下图所示： 这里面用到了一些简单的数学知识：角AOC、COE、EOG、GOI、IOA的值为72°，角AOB、BOC、COD、DOE、EOF、FOG、GOH、HOI、IOJ、JOA的值为36°。 当以O为坐标系原点时，根据大圆、小圆的半径，可以计算出C点坐标为...
canvas绘制不同样式的五角星（图文示例）
最新发布
大剑师兰特的GIS世界
01-18 1558
如何使用canvas绘制不同样式的五角星呢？这里面要确定每个五角星围绕中心点的角度是72度，这里封装了一个函数star(ctx, x, y, R, r, angle,fillColor,strokeColor)，可以设定不同的值，来产生不同样式的五角星。
html canvas五角星,canvas五角星、满天星、星空
weixin_39684960的博客
06-16 137
$(function() {var canvas = $("#canvas1")[0];var context = canvas.getContext("2d");// 参数 6个// R: 外圆半径 r:内圆半径// x,y: 星星 坐标// wujiao: 星星的角数// start_deg: 星星是否旋转// color: 颜色// is_stroke: 是描边还是填充function h...
HTML5 Canvas五角星变换特效.zip
07-04
在这个“HTML5 Canvas五角星变换特效”项目中，我们主要探讨的是如何利用JavaScript和Canvas API来实现五角星的绘制以及动态变换效果。 首先，五角星的绘制通常涉及到Canvas的`beginPath()`、`moveTo()`、`lineTo()...
HTML5 Canvas五角星变换特效特效代码
03-20
在这个“HTML5 Canvas五角星变换特效”中，我们将深入探讨如何利用Canvas API来实现五角星的绘制和动画效果。 首先，Canvas API是HTML5的一个重要组成部分，它提供了一组JavaScript方法，可以用来在网页上创建和...
html5 canvas五角星探照灯文字动画特效
06-11
在这个“html5 canvas五角星探照灯文字动画特效”中，我们将会探讨如何利用Canvas API实现这样的特效。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，它是Canvas画布的基础，通过JavaScript来操作这个元素...
使用canvas画线，位移，旋转，绘制五角星。
09-29
这个教程将带你了解如何利用Canvas进行基本的绘图操作，包括画线、位移和旋转，以及如何巧妙地绘制出五角星图案。无需复杂的数学计算，只需理解Canvas的基本变换原理，你就可以轻松实现这一目标。 首先，Canvas提供...
canvas绘制直线
laxexue的博客
11-28 9711
1、绘制一条直线 context.moveTo(100,100); context.lineTo(700,700); 2、绘制一个箭头 →       closePath()要在stroke()前面 context.lineWidth = 15; context.beginPath(); context.moveTo(100,200); context.lineTo(500,20...
canvas 的文字渲染基础
laxexue的博客
12-13 914
文字渲染基础  context.font = "bold 40px Arial";粗体 字号 字体 context.fillText(string,x,y,[maxlen]);字符 起始坐标 context.strokeText(string,x,y,[maxlen]); font 默认值 20px sans-serif  context.font = font-style font-veria...
canvas 的曲线绘制
laxexue的博客
12-05 469
arc(x,y,r,startingAngle,endingAngle,anticlockwise = false); context.move(x0,y0);开始点         arcTo(x1,y1, 控制点         x2,y2,       结束点         radius) 二次贝塞尔曲线 contex.moveTo(x0,y0);//起始点 contet.qua...
canvas 的变换矩阵
laxexue的博客
11-28 382
transform(a,b,c,d,e,f); 默认transform(1,0,0,1,0,0);没有任何改变 每次的操作会产生叠加的效果 setTransform() 忽略之前的操作
canvas 星空
laxexue的博客
11-28 326
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="canvas" style="border: 1px solid #aaa;display: block;margin:
canvas弧线与圆
laxexue的博客
11-13 288
绘制一条弧线 context.arc(     centerx,centery,radius,     startingAngle,endingAngle,     anticlockwise = false//顺时针默认 true逆时针 ) &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/titl...
canvas的arcTo
laxexue的博客
12-03 230
var canvas = document.getElementById('canvas'); canvas.width = 800; canvas.height = 800; var context = canvas.getContext('2d'); arcToTest(context,150,150,650,150,650,650,300); function arcToTest(c...
canvas 五角星移动
04-04
我不知道你想要的具体细节，但是以下是一个简单的canvas五角星移动的示例代码： HTML: ```html <canvas id="myCanvas" width="400" height="400"></canvas> ``` JavaScript: ```javascript const canvas = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值