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" ...
随机推荐
- （4）logging（日志模块）
日志分成几个常用的级别 debug 10 代表程序调试过程中的信息 info 20 代表普通日志信息,用户的访问等等 warning 30 警告日志,有可能出错,但是目前还没出错的 error 40 ...
- 当php版本为5.6时的提示信息解决方法
ecshop修饰符preg_replace/e不安全的几处改动 Strict standards: Only variables should be passed by reference in D: ...
- BAT 批处理脚本教程
第一章 批处理基础第一节 常用批处理内部命令简介 批处理定义:顾名思义,批处理文件是将一系列命令按一定的顺序集合为一个可执行的文本文件,其扩展名为BAT或者CMD.这些命令统称批处理命令.小知识:可以 ...
- FastAdmin 提示框 toastr 改变文字
如下图这个消息提示框为 toastr. FastAdmin 用的就是 toast 前端组件. 那如何改变这个文字呢? Karson:只要后台使用$this->success("自定义成 ...
- RESTful 知识点
REST(英文:Representational State Transfer,简称REST) 对于资源的具体操作类型,由HTTP动词表示. 常用的HTTP动词有下面五个(括号里是对应的SQL命令). ...
- selenium常用获取元素点
//通过id WebElement element = driver.findElement(By.id("coolestWidgetEvah")); //通过className ...
- JMeter--详解JMeter配置元件
JMeter配置元件可以用来初始化默认值和变量,以便后续采样器使用.将在其作用域的初始化阶段处理. CSV Data Set Config:被用来从文件中读取数据,并将它们拆分后存储到变量中,适合处理 ...
- ASM配置管理
http://blog.chinaunix.net/uid-22646981-id-3060280.htmlhttp://blog.sina.com.cn/s/blog_6a5aa0300102uys ...
- 关于新建android项目时 appcompat_v7报错问题的一点总结
说下我的解决方案: 1.确保 appcompat项目的 target版本 低于 实际项目的android版本(就像.net中 低版本的 framewrok项目不能引用高版本framework项目一样) ...
- 多线程实现ping扫描
代码: # coding=utf-8 import subprocess from Queue import Queue import threading class Pinger(object): ...