canvas绘图详解-06-绘制一个五角星-常用绘图原理

先讲如何画一个正规的五角星

在五角星的内外画两个圆，五角星有五个角，360/5=72度

所以得出这两个角的度数

然后算出这两个点坐标

角度转弧度

角度/180*Math.PI

所以外顶点坐标 x: Math.cos( (18+72*i)/180*Math.PI) * R

y: Math.sin((18+72*i)/180*Math.PI) * R

所以内顶点坐标 x: Math.cos( (54+72*i)/180*Math.PI) * r

y: Math.sin((54+72*i)/180*Math.PI) * r

下面是画一个不同角度不同大小的五角星的函数

function drawStar( cxt , r , R , x , y , rot , borderWidth , borderStyle , fillStyle){cxt.beginPath();for( var i = 0 ; i < 5 ; i ++){cxt.lineTo(Math.cos((18+72*i - rot)/180*Math.PI) * R + x ,- Math.sin((18+72*i - rot )/180*Math.PI) * R + y);cxt.lineTo(Math.cos((54+72*i - rot)/180*Math.PI) * r + x ,- Math.sin((54+72*i - rot )/180*Math.PI) * r + y);}cxt.closePath();cxt.lineWidth = borderWidth;cxt.strokeStyle = borderStyle;cxt.fillStyle = fillStyle;cxt.fill();cxt.stroke();}

以上基于圆型来算顶点坐标的方法是常用方法

转载于:https://www.cnblogs.com/wufangfang/p/6373972.html

canvas绘图详解-06-绘制一个五角星-常用绘图原理相关推荐

Android复习14【高级编程：推荐网址、抠图片上的某一角下来、Bitmap引起的OOM问题、三个绘图工具类详解、画线条、Canvas API详解（平移、旋转、缩放、倾斜）、矩阵详解】
目录推荐网址抠图片上的某一角下来 8.2.2 Bitmap引起的OOM问题 8.3.1 三个绘图工具类详解画线条 8.3.16 Canvas API详解(Part 1) 1.transla ...
canva五角星空html,使用canvas绘制一个五角星
一.了解canvas canvas 是HTML5新增的元素,用于在网页上绘制图形.但 canvas 只是图形的容器,必须要通过脚本(通常是JavaScript)来绘制图形. 可以通过多种方法使用can ...
python turtle循环图案-Python内置模块turtle绘图详解
urtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行的 ...
《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节
本节书摘来自异步社区<Web前端开发精品课--HTML5 Canvas开发详解>一书中的第1部分,第2章,作者:莫振杰著,更多章节内容可以访问云栖社区"异步社区"公众 ...
《HTML5 Canvas开发详解》——1.7　2D上下文及其当前状态
本节书摘来自异步社区<HTML5 Canvas开发详解>一书中的第1章,第1.7节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区&quo ...
Python Turtle 海龟绘图详解官方文档中文版
Python Turtle 海龟绘图详解 (官方文档中文版)-安徽省太湖中学陈晓中整理概述海龟绘图很适合用来引导孩子学习编程. 最初来自于 Wally Feurzeig, Seymour Pape ...
微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
iOS 2D绘图详解（Quartz 2D）之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)
前言:一个路径可以包含由一个或者多个shape以及子路径subpath,quartz提供了很多方便的shape可以直接调用.例如:point,line,Arc(圆弧),Curves(曲线),Ellip ...
《HTML5 canvas开发详解（第2版）》——1.9　HTML5 Canvas对象
本节书摘来自异步社区<HTML5 canvas开发详解(第2版)>一书中的第1章,第1.9节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社 ...

canvas绘图详解-06-绘制一个五角星-常用绘图原理

canvas绘图详解-06-绘制一个五角星-常用绘图原理相关推荐

最新文章

热门文章