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");
//五角星的绘制
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>
最新文章
- Java多种方式动态生成doc文档
- MFC中CString转化为char*
- ABAP 使用的字符类型
- 简单的doc命令
- Sharepoint 2010 之 WebPart
- Hibernate缓存配置
- apicloud教程3 (转载)
- Grunt压缩HTML和CSS
- mybatis快速入门(五)
- Java历程-初学篇 Day08 数组
- 【转】sed &; awk常用正则表达式
- Java并发编程:什么是CAS?这回总算知道了
- spring源码分析系列 (2) spring拓展接口BeanPostProcessor
- Implementing HTTPS Everywhere in ASP.Net MVC application.
- 【移动端debug-6】如何做一个App里的web调试小工具
- 写时复制和fork,vfork,clone
- 第五届CCPC河南省赛参赛有感
- 搭建docker 私有镜像仓库
- 【Mybatis】简单的mybatis增删改查模板
- 【数学】Codeforces Round #470 (Div2) B