HTML5 Canvas ( 画一个五角星 ) lineJoin miterLimit
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
#canvas{
margin: auto auto;
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10);
/**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvas = $('#canvas')[0];
var cxt = canvas.getContext('2d'); /**
* 线段相交交点的三种表现形式
* bevel round miter( 受 miterLimit 值得约束 )
*/
var fiveStart = {
bigRadius: 200,
smallRadius: 30,
offsetX: 400,
offsetY: 300,
RotationAngle: 0
} //cxt.lineJoin = "bevel"; //线与线的交点平角
//cxt.lineJoin = "round"; //线与线的交点圆角
cxt.lineJoin = "miter"; //线与线的交点尖角
cxt.miterLimit = 40; //尖角指数配合 miter 使用,数字越大,产生尖角的可能性越大
drawFiveStar(cxt, fiveStart); /**
* 绘制五角星的方法
*/
function drawFiveStar(cxt, fiveStart){
cxt.beginPath();
cxt.lineWidth = 10;
var x = 0, y = 0;
for(var i = 0; i < 5; i++){
x = Math.cos((18+72*i-fiveStart.RotationAngle)/180*Math.PI);
x = x*fiveStart.bigRadius+fiveStart.offsetX;
y = -Math.sin((18+72*i-fiveStart.RotationAngle)/180*Math.PI);
y = y*fiveStart.bigRadius+fiveStart.offsetY;
cxt.lineTo(x,y);
x = Math.cos((54+i*72-fiveStart.RotationAngle)/180*Math.PI);
x = x*fiveStart.smallRadius+fiveStart.offsetX;
y = -Math.sin((54+i*72-fiveStart.RotationAngle)/180*Math.PI);
y = y*fiveStart.smallRadius+fiveStart.offsetY;
cxt.lineTo(x,y);
}
cxt.closePath();
cxt.stroke();
}
</script>
HTML5 Canvas ( 画一个五角星 ) lineJoin miterLimit的更多相关文章
- 没事用html5 canvas画一个仪表盘自用，自适应的哦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5 canvas 实现一个简单的叮当猫头部
原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...
- 用Canvas画一个刮刮乐
Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...
- 深夜，用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- 10分钟，利用canvas画一个小的loading界面
首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...
- html5 canvas画进度条
这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...
- HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...
- HTML5 Canvas 画钟表
画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...
- CSS3进度条 和 HTML5 Canvas画圆环
看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...
随机推荐
- hdu 5184 类卡特兰数+逆元
BC # 32 1003 题意:定义了括号的合法排列方式,给出一个排列的前一段,问能组成多少种合法的排列. 这道题和鹏神研究卡特兰数的推导和在这题中的结论式的推导: 首先就是如何理解从题意演变到卡特兰 ...
- JQuery输入框获取/失去焦点行为
//搜索框获取焦点清除内容 $(function() { $("input").focus(function() { //获取焦点,清空默认内容 $(this).css('colo ...
- HDU 5372 Segment Game (树状数组)
题意是指第i此插入操作,插入一条长度为i的线段,左端点在b[i],删除某一条线段,问每次插入操作时,被当前线段完全覆盖的线段的条数. 题解:对于新插入的线段,查询有多少个线段左端点大于等于该线段的左端 ...
- gevent和tornado异步
阅读目录 从 Tornado 说起 再来看下 Gevent 总要总结一下 原文:http://www.pywave.com/2012/08/17/about-gevent-and-tornado/ 还 ...
- 使用Reaction cli 创建应用
默认简单跑起来,我们可以直接使用docker,同时官方也为我们提供了cli 工具,可以快速的创建应用 安装cli npm install -g reaction-cli 初始化项目 reaction ...
- oracel SQL多表查询优化
SQL优化 1.执行路径:ORACLE的这个功能大大地提高了SQL的执行性能并节省了内存的使用:我们发现,单表数据的统计比多表统计的速度完全是两个概念.单表统计可能只要0.02秒,但是2张表联合统计就 ...
- BZOJ 1845三角形面积并
题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1845 给定100个三角形,求三角形面积并. 戴神模板太可怕.直接调用函数秒掉.思路 ...
- gphoto2 canon eos450d
hjs@ubuntu:~$ gphoto2 --capture-image-and-download ...
- C# 监听HTTP请求（遇到的一些问题）
先把代码放在这里,下面再详细解说: using Newtonsoft.Json; using Newtonsoft.Json.Linq; using Oracle.DataAccess.Client; ...
- dedeampz安装wordpress程序，然后新增数据库方法
看到一篇文章,用dedeampz安装wordpress程序,增加新的数据库的. 安装方法很简单,就是把..\DedeAMPZ\WebRoot\Default 下面的dede的代码 可以给移走放到别的地 ...