<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");
//五角星的绘制
context.fillStyle = "black";
context.fillRect(0,0,800,800);
for(var i = 0;i < 200;i++)
{
context.save();
var r = Math.random()*10+10;
var x = Math.random()*c.width;
var y = Math.random()*c.height;
var rot = Math.random()*360;
drawstar(context,r/2,r,x,y,rot);
context.restore();
}
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.lineWidth = 3;
cxt.fillStyle = "yellow";
cxt.stroke
cxt.lineJoin = "round";
cxt.fill();
cxt.stroke();
}
</script>
</html>

canvas学习之初级运用的更多相关文章

  1. canvas学习(一)

    Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的 ...

  2. canvas学习之API整理笔记（二）

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  3. canvas学习和面向对象(二)

    Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...

  4. 学习了初级的Python

    今天傍晚完成了Code Academy上Python的所有练习,感觉Python的原力在我身体里流淌......下面要学习一些进阶的东西.之前Zhi哥跟我说Python比较简单,我还不太信.其实早在四 ...

  5. canvas学习总结六：绘制矩形

    在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...

  6. Java工程师学习指南 初级篇

    Java工程师学习指南 初级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...

  7. canvas学习笔记、小函数整理

    http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...

  8. canvas学习（三）：文字渲染

    一.绘制基本的文字: var canvas = document.getElementById("myCanvas") var ctx = canvas.getContext('2 ...

  9. canvas学习（二）：渐变与曲线的绘制

    canvas学习(二):渐变与曲线的绘制 一:createLinearGradient()线性渐变: 二:createLinearGradient() 放射状/圆形渐变: 三:createPatter ...

随机推荐

  1. Express框架开发知识点总结

    express --view=pug myapp 以上语句在当前工作目录中创建名为 myapp 的 Express 应用程序,采用的模板是jade. 以前还在纠结使用hbs模板引擎或者ejs模板,实际 ...

  2. Splinter自动登录

    默认用foxfire浏览器,如果用chrome请到官网下载 chromedriver驱动,解压后放到python目录scripts下 然后添加环境变量,在Path下添加chromedrvier的路径. ...

  3. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_20-页面静态化-静态化测试-填写页面DataUrl

    启动前端和后端.轮播图的数据url可以在这里修改. 找到列表页面的轮播图,然后点击编辑 随便更新一个地址测试 提交后数据再次编辑 发现url没有变化 在pageService里面update方法把更新 ...

  4. python3 高级编程(三) 使用@property

    @property装饰器就是负责把一个方法变成属性调用的. @property广泛应用在类的定义中,可以让调用者写出简短的代码,同时保证对参数进行必要的检查,这样,程序运行时就减少了出错的可能性 cl ...

  5. PAT 甲级 1012 The Best Rank (25 分)（结构体排序）

    题意: 为了评估我们第一年的CS专业学生的表现,我们只考虑他们的三个课程的成绩:C - C编程语言,M - 数学(微积分或线性代数)和E - 英语.同时,我们鼓励学生强调自己的最优秀队伍 - 也就是说 ...

  6. CDH集群部署hive建表中文乱码

    背景:部署CDH集群的 hive 服务,选用 mysql 作为 hive 元数据的存储数据库,通过 hive cli 建表时发现中文注释均乱码. 现象:hive端建表中文注释乱码. 定位: 已经确认过 ...

  7. [C++]单源最短路径：迪杰斯特拉(Dijkstra)算法(贪心算法)

    1 Dijkstra算法 1.1 算法基本信息 解决问题/提出背景 单源最短路径(在带权有向图中,求从某顶点到其余各顶点的最短路径) 算法思想 贪心算法 按路径长度递增的次序,依次产生最短路径的算法 ...

  8. es6 map()和filter()详解【转】

    原文地址:http://www.zhangxinxu.com/wordpress/2013/04/es5%e6%96%b0%e5%a2%9e%e6%95%b0%e7%bb%84%e6%96%b9%e6 ...

  9. exchange 2010入门到精通

    exchange 2010入门到精通 Exchange产品介绍和功能演示 Exchange是什么 目前最受欢迎企业级邮件服务器产品 市场占有率70%(2011数据) 微软消息协作平台中核心产品 Exc ...

  10. windows下安装配置winpcap

    winpcap官网:http://www.winpcap.org/ 1.首先下载安装winpcap.exe,http://www.winpcap.org/install/default.htm 目的是 ...