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" ...
随机推荐
- Prime Ring Problem dfs
A ring is compose of n circles as shown in diagram. Put natural number 1, 2, ..., n into each circle ...
- flynn 开源paas 平台安装试用
flynn 是一个不错的开源paas 平台,基于git 以及容器技术,开发模型与 heroku 基本一样,同时构建方式就是基于heroku 的buildpacks 安装 官方文档提示说明是ubuntu ...
- ory Oathkeeper Ecosystem
ory Oathkeeper 生态包含的组件 ORY Hydra is an OAuth 2.0 and OpenID Connect provider. ORY Oathkeeper is an I ...
- Zxing图片拉伸解决 Android 二维码扫描
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/aaawqqq/article/details/24852915 二维码扫描 Android Zx ...
- Yii2 环境配置生产环境和测试环境
默认的Debug配置 在入口文件web/index.php中 defined('YII_DEBUG') or define('YII_DEBUG', true);defined('YII_ENV') ...
- ES(2): Build ES Cluster on Azure VM
目录: 系统环境准备 安装ES集群 安装Kibana 安装x-pack 安装head 系统环境准备 参见: HDP2.4安装(二):Centos7配置 修改network: 修改hosts: 配置ss ...
- (文章转载)织梦CMS判断不同的栏目显示不同的图片
{dede:php} $thisid = $refObj->Fields['id']; $row = $dsql->GetOne("Select typeid From `ybs ...
- 如何在UltraEdit中高亮显示PB代码
打开UE,从菜单中选择高级->配置… 点击打开按钮,注意文件WordFile.txt最后一个高亮显示语言的编号,格式为“ /L(number) ”,假设最后一个高亮显示语言的编号是15,修改UE ...
- tomcat和servlet的关系
一.什么是servlet? 处理请求和发送响应的过程是由一种叫做Servlet的程序来完成的,并且Servlet是为了解决实现动态页面而衍生的东西.理解这个的前提是了解一些http协议的东西,并且知道 ...
- BASIC-1_蓝桥杯_闰年判断
正确代码: #include <stdio.h> int main(void){ int year = 0 ; scanf("%d",&year); if (y ...