<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. css简单学习属性

      1:内联元素和块级元素 1).块级元素,默认是:内联元素可以变成块级元素,块级元素可以变成内联元素. <!DOCTYPE html> <html lang="en&qu ...

  2. 【UI】数据表格设计

    https://www.smashingmagazine.com/2019/02/complex-web-tables/ https://www.smashingmagazine.com/2019/0 ...

  3. LODOP纸张高度不定的纯文本累计高度

    小票由于纸张没有确定的高度,根据内容多少,小票打印机出多少纸,在设置纸张的时候,需要把纸张设置成不定高的纸张.简短问答:小票打印 ,参考样例18 http://www.c-lodop.com/demo ...

  4. asp.net网站访问时不能显示页面

    web => 属性 => web => servers =>create virtual directory

  5. Shader 中的颜色计算

    下面介绍 Shader 中 gl_FragColor 的计算与转换: 一.颜色计算 1. 加 这里要讲讲三原色和三基色:三原色一般指的是红.绿.蓝三种,简称 RGB,这是加色系.就是光源只含有特定的波 ...

  6. 阻止移动端input按钮聚焦时唤起软键盘的方法

    一.设置input为readonly 二.使用JS代码,在input按钮fous时就让其blur

  7. 带你手写基于 Spring 的可插拔式 RPC 框架（二）整体结构

    前言 上一篇文章中我们已经知道了什么是 RPC 框架和为什么要做一个 RPC 框架了,这一章我们来从宏观上分析,怎么来实现一个 RPC 框架,这个框架都有那些模块以及这些模块的作用. 总体设计 在我们 ...

  8. MemCache在.NET中使用Memcached.ClientLibrary详解

    本文说明:memcached分布式缓存的负载均衡配置比例,数据压缩,socket的详细配置等,以及在.net中的常用方法 首先下载客户端的3个dll,ICSharpCode.SharpZipLib.d ...

  9. ActiveMQ单机部署及简单应用

    系统版本:Centos 7 前言 MQ是消息中间件,是一种在分布式系统中应用程序借以传递消息的媒介,常用的有ActiveMQ,RabbitMQ,kafka.ActiveMQ是Apache下的开源项目, ...

  10. B8 Concurrent JDK中的乐观锁与原子类

    [概述] 乐观锁采用的是一种无锁的思想,总是假设最好的情况,认为一个事务在读取数据的时候,不会有别的事务对数据进行修改,只需要在修改数据的时候判断原数据数据是否已经被修改了.JDK 中 java.ut ...