canvas标签画正多边形函数

<!DOCTYPE HTML>
<canvas id="canvas" width="600px" height="500px" style="border:1px solid #A6A7A6;"></canvas>
<script>/**以(x,y)为中心，半径为r的正n边形*@param c 是canvas的上下文对象*@param angle 是第一个点(以最上面的顶点为准)偏离中心点(x,y)的弧度*    angle为0时第一个点和中心的x想等，如第一个正方形#@param counterclockwise 是angle偏离是顺时针还是逆时针*/function polygon(c,n,x,y,r,angle,counterclockwise){var angle = angle || 0;var counterclockwise = counterclockwise || false;c.moveTo(x + r*Math.sin(angle), y - r*Math.cos(angle));        //确立第一个点var delta = 2*Math.PI/n;       //相邻两个顶点之间的夹角for(var i=0;i<n;i++){            //其他顶点angle += counterclockwise ? -delta : delta;     //角度调整c.lineTo(x + r*Math.sin(angle), y - r*Math.cos(angle));}c.closePath();       //首位相邻}var canvas = document.getElementById('canvas');var c = canvas.getContext("2d");c.beginPath();polygon(c,4,60,200,40);polygon(c,4,180,200,40,Math.PI/4);polygon(c,6,300,200,40,Math.PI/6);polygon(c,12,460,200,40);c.fillStyle = '#f00';c.fill();
</script>

canvas标签画正多边形函数相关推荐

html5两条直线,Html5新特性用canvas标签画多条直线附效果截图
下面例子为用canvas标签画多条直线复制代码代码如下: index_three 您的浏览器不支持canvas标签. //获取Canvas对象(画布) var canvas = document.g ...
原生JS的canvas标签画时钟
首先要申明本人对于美除了美女真没什么要求. 其次讲讲次学习碰到重要知识点: 1.画圆(弧): context.arc(x, y, radius, Math.PI / 180 * startAngle, ...
html a标签指定区域,第四讲：使用html5中的canvas标签画出一个球在指定区域内的运动...
小球在一个区域运动 var canvas = document.getElementById('mc'); var cxt = canvas.getContext('2d'); //定义一个小球 va ...
【前端学习笔记—canvas标签和使用canvas画哆啦A梦案例】
目录 canvas 1. canvas是H5新增标签 2.使用canvas画出矩形 (1)第一步,要新建画布 (2)第二步,要创建一支画笔 (3)第三步,用canvas画出矩形 3. 如何使用canv ...
html5引入的新标签canvas,HTML页面中添加Canvas标签示例
怎样在html5中添加canvas标签标签是 HTML 5 中的新标签. 定义和用法标签定义图形,比如图表和其他图像. 标签只是图形容器,您必须使用脚本来绘制图形. 实例通过 canvas 元素 ...
html5 strongeaseinout,HTML5新特性之canvas标签（Day1-4）(示例代码)
canvas 1.什么是canvas? 1.1 是HTML5提供的一种新标签 1.2 canvas是一个矩形区域的画布,可以用JavaScript在上面绘画.控制其每一个像素 1.3 canvas 拥 ...
使用 HTML5 Canvas 标签的贪吃蛇游戏
https://thoughtbot.com/blog/html5-canvas-snake-game 保罗·詹森 2009 年 12 月 31 日更新于 2019年3 月 9 日这篇文章最初发 ...
用HTML5新增canvas标签实现个性时钟效果
先看看效果图吧目录简介实现思路代码 html部分 css部分 js部分绘制函数部分: 完整代码如下简介十二小时制的时钟,最内层是秒针,中间为分针,外层为时针. 中心显示的是当前日期和时间 ...
【不可思议的CANVAS】画一只会跟着鼠标走的小狗
点击上方"IT平头哥联盟",选择"置顶或者星标" 你的关注意义重大! 以前经常看到这种效果:在网页右下角放一个人,然后他的眼珠会跟着鼠标转,效果如下: 这个例子 ...

canvas标签画正多边形函数

canvas标签画正多边形函数相关推荐

最新文章

热门文章