canvas之五角星的绘制
<html>
<head>
<meta charset=utf-8>
<title>绘制简单图形线及矩形</title>
<style type="text/css">
canvas{
border: 1px solid #aaa;
display: block;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
var c = document.querySelector("#canvas");
c.width = 800;
c.height = 800;
//画布
var context = c.getContext("2d");
//五角星的绘制
function drawstar(cxt,r,R,x,y,rot)
{
context.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.fillStyle="pink";
cxt.lineWidth = 3;
cxt.fill();
cxt.stroke();
}
drawstar(context,130,200,400,400,60);
</script>
</html>
最新文章
- mongo-c-driver使用VS2013编译
- PYTHON 自动化学习之路
- 李洪强iOS开发之keychain的使用
- abstract
- linux-多线程
- maclean-【性能调优】Oracle AWR报告指标全解析 学习笔记
- js日期控件demo
- 一步一步深入spring(6)--使用基于XML配置的spring实现的AOP
- 第八十八节,html5+css3pc端固定布局,搜索区,插入大图,搜索框
- 即时通信系统Openfire分析之五:会话管理
- Thread.yield和join方法
- 二.误删除MySQL用户,恢复方法
- python3学习笔记十(循环语句)
- c/c++ new delete初探
- Spring Boot - Profile配置
- Sublime Text3前端必备插件
- ansible指路篇-安装及基本命令使用
- mvc4安装、新建、模版简介
- cv_list
- 微信小程序客服消息使用
热门文章
- 前端知识点回顾——mongodb和mongoose模块
- Java同步数据结构之PriorityBlockingQueue
- oracle 中SQL 语句开发语法 SELECT INTO含义
- 3GPP 5G UPF
- Kibana Query Language(KQL)
- django安装xadmin中出现的报错汇总
- pod install报错 [!] Error installing......
- 【c++基础】C++编写Config类读取配置文件
- Linux 18.04 搭建lamp环境
- Redis安装与配置问题