<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之五角星的绘制的更多相关文章

  1. canvas自适应圆形时钟绘制

    前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...

  2. Canvas：橡皮筋线条绘制

    Canvas:橡皮筋线条绘制 效果演示 实现要点 事件监听 [说明]: 在Canvas中检测鼠标事件是非常简单的,可以在canvas中添加一个事件监听器,当事件发生时,浏览器就会调用这个监听器. 我们 ...

  3. 神奇的canvas——点与线绘制的绚丽动画效果

    代码地址如下:http://www.demodashi.com/demo/11636.html 前言 之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效果 ...

  4. HTML5 Canvas（实战：绘制饼图2 Tooltip）

    继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...

  5. canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表

    制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...

  6. 使用canvas元素-art方法绘制圆弧

    最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作.我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识. 首先看 ...

  7. html5 canvas 笔记三（绘制文本和图片）

    绘制文本 fillText(text, x, y [, maxWidth])   在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...

  8. 自定义View(4)Canvas和Paint常用绘制函数

    画布Canvas 在Android下进行2D绘图需要Canvas类的支持,它位于"android.graphics.Canvas"包下,直译过来为画布的意思,用于完成在View上的 ...

  9. WPF-22：WPF绘制五角星改进版（增加半个五角星的绘制）-修改bug

    之前用坐标画多边形的方法,绘制五角星.今天调试时发现当时写的时候有bug,修改一下. 原文: http://blog.csdn.net/yysyangyangyangshan/article/deta ...

随机推荐

  1. Docker-compose的安装和使用

    一.简介 Compose 项目 是 Docker 官方的开源项目 , 负 责实 现对 Docker 容器 集群的快速编排,其前身 是开源项目 Fig, 目前仍然兼容 Fig格式的模板文件. 使用 一个 ...

  2. delphi 中如何从数据库中读取数据自生成TreeView，只有两个字段，数据库结构如下。急急！！

    我的数据库结构如下:UnitId      UnitName01          中国 (根节点)0101        河北省(二级树)010101      河北省沧州市(三级树)0101010 ...

  3. nginx反向代理本地 单台wed -使用ip+端口代理

    环境: 本地外网ip:123.58.251.166 .配置index.html网页 [root@host---- conf.d]# cat /web/sing/index.html <h1> ...

  4. PyQt5 调用 View 视图的方法

    一.使用Qt Designer 1. 直接引用ui文件: from PyQt5.uic import loadUi class MainWindow(QDialog): def __init__(se ...

  5. 剑指offer 67. 字符串转换为整数（Leetcode 8. String to Integer (atoi)）

    题目:剑指offer 67题 需要考虑的情况:空指针.nullptr.空字符串"".正负号.数值溢出.在写代码的时候对这些特殊的输入都定义好合理的输出.可以定义一个全局布尔型变量g ...

  6. 关于SVM的一些知识点

    SVM支持向量机 定义:支持向量机是主要用于解决分类问题的学习模型.它的基本模型是在特征空间中寻找间隔最大化的分离超平面的线性分类器. 分类 1-当训练样本线性可分,通过硬间隔最大化,学习一个线性分类 ...

  7. Ubuntu修改终端显示的主机名、用户名、目录不同颜色

    打开终端输入:echo $PS1 输入:gedit ~/.bashrc #定位到如下代码: if [ "$color_prompt" = yes ]; then PS1='${de ...

  8. spring中的bean的生命周期

    bean的生命周期:bean的创建 —— 初始化 ——销毁的过程 容器管理bean的生命周期,我们可以自定义初始化和销毁方法,容器在bean进行到当前生命周期就会调用我们的方法 在xml配置文件中是在 ...

  9. 冲刺Noip2017模拟赛5 解题报告——五十岚芒果酱

    1. 公约数(gcd) [问题描述] 给定一个正整数,在[,n]的范围内,求出有多少个无序数对(a,b)满足 gcd(a,b)=a xor b. [输入格式] 输入共一行,一个正整数n. [输出格式] ...

  10. [TCP/IP] 滑动窗口

    什么是滑动窗口? 滑动窗口机制是TCP协议的一种流量控制和防拥塞的机制. 滑动窗口的工作原理? 简单来讲,就是接收方和发送方分别保留一块缓冲区,作为接收和发送数据来使用,发送数据过程中,如果发送方发的 ...