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为 ...
随机推荐
- ajax完整请求
@RequestMapping(value = "/quotaPage") // , method = RequestMethod.GET名额分配@ResponseBody //注 ...
- 【idea】如何将idea的项目路径设置成代码目录和配置文件目录
一:创建相应的目录 二.提升目录的等级
- UVA1252 【Twenty Questions】
分析 为了叙述方便,设"心里想的物体"为W.首先在读入时把每个物体转化为一个二进制整数.不难发现,同一个特征不需要问两遍,所以可以用一个集合s表示已经询问的特征集. 在这个集合s中 ...
- PDF文本框更改字体大小
在Adobe Acrobat Professional 7.0版本后里单击所插入的文本框,会出现文本框属性,此时只能改文本框的属性,不能修改文本框内的字体大小 要改字体很简单,左键选中要改的文本,按 ...
- C# 使用ZXing.NET生成一维码、二维码
以上图片是本示例中的实际运行效果,在生活中我们的一维码(也就是条形码).二维码 使用已经非常广泛,那么如何使用c#.net来进行生成一维码(条形码).二维码呢? 使用ZXing来生成是非常方便的选择, ...
- alpha和color key
一.alpha 1.透明度,一般取值0-255 2.Alpha 通道: Alpha 通道是为保存选择区域而专门设计的通道.在生成一个图像文件时,并不必须产生 Alpha 通道.通常它是由人们在图 ...
- net web service 参数类型
因为Web Services的执行是建立在XML架构之上的,所以它能够支持丰富的数据类型. 下表列出了使用SOAP协议时Web Services支持的数据类型: 类 型 含 义 基础类型 也即标准基 ...
- 字符设备之register_chrdev与register_chrdev_region(转)
之前写字符设备驱动,都是使用register_chrdev向内核注册驱动程序中构建的file_operations结构体,之后创建的设备文件,只要是主设备号相同(次设备号不同),则绑定的都是同一个fi ...
- codevs 1131 统计单词数
#include<iostream> #include<string> using namespace std; int main() { string s, s0; getl ...
- Mono.Cecil 修改目标.NET的IL代码保存时报异常的处理。
使用Mono.Cecil对目标.NET的DLL程序进行IL修改后保存时报“Failed to resolve assembly: ' xxxxxx, version=xxxxx,Culture=xxx ...