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>
canvas之五角星的绘制的更多相关文章
- canvas自适应圆形时钟绘制
前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...
- Canvas:橡皮筋线条绘制
Canvas:橡皮筋线条绘制 效果演示 实现要点 事件监听 [说明]: 在Canvas中检测鼠标事件是非常简单的,可以在canvas中添加一个事件监听器,当事件发生时,浏览器就会调用这个监听器. 我们 ...
- 神奇的canvas——点与线绘制的绚丽动画效果
代码地址如下:http://www.demodashi.com/demo/11636.html 前言 之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效果 ...
- HTML5 Canvas(实战:绘制饼图2 Tooltip)
继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...
- canvas画画板,canvas画五角星,canvas制作钟表、Konva写钟表
制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...
- 使用canvas元素-art方法绘制圆弧
最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作.我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识. 首先看 ...
- html5 canvas 笔记三(绘制文本和图片)
绘制文本 fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...
- 自定义View(4)Canvas和Paint常用绘制函数
画布Canvas 在Android下进行2D绘图需要Canvas类的支持,它位于"android.graphics.Canvas"包下,直译过来为画布的意思,用于完成在View上的 ...
- WPF-22:WPF绘制五角星改进版(增加半个五角星的绘制)-修改bug
之前用坐标画多边形的方法,绘制五角星.今天调试时发现当时写的时候有bug,修改一下. 原文: http://blog.csdn.net/yysyangyangyangshan/article/deta ...
随机推荐
- 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_17.RabbitMQ研究-与springboot整合-消费者代码
创建消费者的类 使用@Component把这个类标记成一个Bean 把生产者里面创建的配置文件类复制过来 在原始的消费的方法上面 ,我们是可以拿到channel通道的 message.getBody就 ...
- python3 高级编程(一) 使用__slots__
使用__slots__的目的:限制实例的属性 用法:定义class的时候,定义一个特殊的__solts__变量,来限制实例能添加的属性. class Student(object): __slots_ ...
- Centos 6.8环境下OpenLDAP安装与部署
一.OpenLDAP介绍 LDAP 全称轻量级目录访问协议(英文:Lightweight Directory Access Protocol),是一个运行在 TCP/IP 上的目录访问协议.LDAP实 ...
- ubuntu报错解决和注意事项
1.在容器中安装expect报错 [root@kube-node3 target]# docker exec -it 36563e55c42b sh$ sudo apt-get install exp ...
- 初始Hibernate框架
首先我们需要先创建一个案例 构建一个Student 的实体类 private String name; private Integer age; private Integer id; 在SRC根目录 ...
- GBDT详解例子
https://blog.csdn.net/zpalyq110/article/details/79527653
- springMVC配置文件学习
spring配置文件分为dao层,web层,service层,三层配置 这三层配置中, dao层对应数据库的配置:进行数据库相关和model实体类的配置 web层对应controller包中配置:设置 ...
- 三小时攻克 Kubernetes!
我保证本文是最详尽的 Kubernetes 技术文档,从我在后台排版了这么漫长的时间就能看出来.废话不多说——牢牢占据容器技术统治地位的 Kubernetes,其重要性想必不言而喻. 以下为译文: 为 ...
- 2、PHP变量
2.1含义与定义形式 就是使用一个“标记符号”(标识符),来代表某个数据. 类比: 用一个名字(姓名),来代表某个人. 用一个身份证号码,来代表某个人... 用一个变量,就可以理解为“使用一个数据”. ...
- 最新 盛趣游戏java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.盛趣游戏等10家互联网公司的校招Offer,因为某些自身原因最终选择了盛趣游戏.6.7月主要是做系统复习.项目复盘.Leet ...