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为 ...
随机推荐
- 弱也有弱的ACM经历
作为一名弱校的acm渣渣,在经历了三年的acm生涯后,现在终于要毕业了,最后也来总结下自己在这几年中做acm的经历与感受.以下是参赛总结: 2013年: ACM/ICPC长沙邀请赛(打铁=_=) AC ...
- hangfire docker-compose 运行
hangfire 是一款基于.net 的任务调度系统 docker-compose 文件 version: '3' services: hangfire: image: direktchark/han ...
- hadoop 配置文件简析
文件名称 格式 描述 hadoop-env.sh bash脚本 记录hadoop要用的环境变量 core- ...
- Django中更新多个对象数据与删除对象的方法
更新多个对象 例如说我们现在想要将Apress Publisher的名称由原来的”Apress”更改为”Apress Publishing”.若使用save()方法,如: ? 1 2 3 >&g ...
- x86 openwrt虚拟路由代理上网
一.代理服务器设置 1.下载代理软件CCProxy 6.8 Build 2.设置如下 二.x86 路由设置 1.在/etc目录下编辑profile http_proxy= https_proxy= f ...
- 查看端口 （windows）
查看端口 netstat -an |findstr
- python中hashlib md5
如下两种方法,结果相同 import hashlib import time m = hashlib.md5() m.update(str(time.time()).encode('utf-8')) ...
- 2013-8-6 ubuntu基本操作
1,apt-get下载文件默认安装路径 apt-get 下载后,软件所在路径是什么?? /var/cache/apt/archives ubuntu 默认的PATH为 PATH=/home/brigh ...
- Celery 异步定时周期任务
1/什么是Celery Celery 是基于Python实现的模块,用于执行异步定时周期任务的 其结构的组成是由 1.用户任务app 2.管道 broker 用于存储任务 官方推荐 redis rab ...
- 纯文本文件 student.txt为学生信息, 里面的内容（包括花括号）如下所示
import json from collections import OrderedDict import xlwt with open('student.txt',encoding='utf-8' ...