HTML5 Canvas ( 扩展context('2d') ) CanvasRenderingContext2D.prototype.你的方法名
<!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'); /**
* 扩展context('2d'), 绘制五角星的方法
*/
CanvasRenderingContext2D.prototype.fillFiveStar = function(fiveStar){
this.beginPath();
this.lineWidth = 10;
var x = 0, y = 0;
for(var i = 0; i < 5; i++){
x = Math.cos((18+72*i-fiveStar.RotationAngle)/180*Math.PI);
x = x*fiveStart.bigRadius+fiveStar.offsetX;
y = -Math.sin((18+72*i-fiveStar.RotationAngle)/180*Math.PI);
y = y*fiveStart.bigRadius+fiveStar.offsetY;
this.lineTo(x,y);
x = Math.cos((54+i*72-fiveStar.RotationAngle)/180*Math.PI);
x = x*fiveStart.smallRadius+fiveStar.offsetX;
y = -Math.sin((54+i*72-fiveStar.RotationAngle)/180*Math.PI);
y = y*fiveStart.smallRadius+fiveStar.offsetY;
this.lineTo(x,y);
}
this.closePath();
this.stroke();
} /**
* 调用扩展的方法
*/
var fiveStart = {
bigRadius: 200,
smallRadius: 30,
offsetX: 400,
offsetY: 300,
RotationAngle: 0
}
cxt.fillFiveStar(fiveStart);
</script>
HTML5 Canvas ( 扩展context('2d') ) CanvasRenderingContext2D.prototype.你的方法名的更多相关文章
- 基于 HTML5 Canvas 的简易 2D 3D 编辑器
不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成 ...
- HTML5 Canvas 绘图
首先要注意: <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Ex ...
- 50代码HTML5 Canvas 3D 编辑器优雅搞定
1024程序员节刚过,手痒想实现一个html的3d编辑器,看了three.js 同时还看了网上流传已久的<<基于 HTML5 Canvas 的简易 2D 3D 编辑器>>,都觉 ...
- 赠书：HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
- HTML5 Canvas 2D library All In One
HTML5 Canvas 2D library All In One https://github.com/search?q=Javascript+Canvas+Library https://git ...
- HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识
一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...
- HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...
- HTML5 Canvas彩色小球碰撞运动特效
脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效. 效果展示 http://hovertree.com/texiao/html5/39/ ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
随机推荐
- centos下安装必要组件(相当于apt-get install install build-essential)
在centos下执行 : sudo yum groupinstall 'Development Tools'
- struts神马的不过是对servlet、filter的封装而已，hibernate神马的也不过是对jdbc的封装而已，他们只是把一些常见的操作流程化了，如果不懂servlet、filter，不懂jdbc，使用struts和hibernate出问题了都不知道是怎么回事。
struts神马的不过是对servlet.filter的封装而已,hibernate神马的也不过是对jdbc的封装而已,他们只是把一些常见的操作流程化了,如果不懂servlet.filter,不懂jd ...
- day30 python学习 struct模块和 subprocess 模块
import subprocess import struct aa=input('>>') obj=subprocess.Popen(aa,shell=True,#aa代表的是读取字符串 ...
- Aria2+yaaw+Chrome插件BaiduExporter实现百度网盘下载
Aria2+yaaw+Chrome插件BaiduExporter实现百度网盘下载 这篇博客主要为了解决百度网盘下载限速以及linux等操作系统无百度客户端的问题.主要包括两个方面第一个是aria2的安 ...
- Excel 从字符串中提取日期值
因为工作需要,Excel 表中有一串字符,需要将字符里的日期提取出,并转成日期值. 需要转成如下格式: 可使用以下公式. =DATEVALUE(TEXT(MID(I2,1,4)+1&" ...
- RabbitMQ消息可靠性分析
消息中间件的可靠性是指对消息不丢失的保障程度:而消息中间件的可用性是指无故障运行的时间百分比,通常用几个 9 来衡量.不存在绝对的可靠性只能尽量趋向完美.并且通常可靠性也意味着影响性能和付出更大的成本 ...
- 修改 input 框输入光标的样式
input, textarea { font-size: 24px; padding: 10px; color: red; text-shadow: 0px 0px 0px #000; -webkit ...
- JFrame 与 Frame
JFrame是Frame的子类 Frame is part of java.awt package and exists since JDK1.0. JFrame is part of javax.s ...
- c# ProgressBar进度条方向和美观
protected override CreateParams CreateParams { get { CreateParams cp = base.CreateParams; cp.Style | ...
- each与list的用法（PHP学习）
1.each的用法 先看API array each ( array &$array ) api里是这么描述的:each — 返回数组中当前的键/值对并将数组指针向前移动一步 我们先来看看返回 ...