canvas图形函数
function drawStar(cobj,x, y, radius1, radius2, num, drawType, color) {//参数:画笔,圆心X。圆心Y,半径1,半径2,形状边,实心|空心,颜色
var angle = 360 / (num * 2);
var arr = [];
for(var i = 0; i < num * 2; i++) {
var starObj = {};
if(i % 2 == 0) {
starObj.x = x + radius1 * Math.cos(i * angle * Math.PI / 180);
starObj.y = y + radius1 * Math.sin(i * angle * Math.PI / 180);
} else {
starObj.x = x + radius2 * Math.cos(i * angle * Math.PI / 180);
starObj.y = y + radius2 * Math.sin(i * angle * Math.PI / 180);
}
arr.push(starObj);
}
cobj.beginPath();
cobj.fillStyle = color;
cobj.strokeStyle = color;
cobj.moveTo(arr[0].x, arr[0].y);
for(var i = 1; i < arr.length; i++) {
cobj.lineTo(arr[i].x, arr[i].y);
}
cobj.closePath();
if(drawType == "fill") {
cobj.fill();
} else {
cobj.stroke();
}
}
canvas图形函数的更多相关文章
- matlab画图形函数 semilogx
matlab画图形函数 semilogx loglog 主要是学习semilogx函数,其中常用的是semilogy函数,即后标为x的是在x轴取对数,为y的是y轴坐标取对数.loglog是x y轴都取 ...
- HTML5 Canvas arc()函数//////////////////////(转)
HTML5 Canvas arc()函数 实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.get ...
- [html] 学习笔记-Canvas图形绘制处理
使用Canvas API 可以将一个图形重叠绘制在另外一个图形上,也可以给图形添加阴影效果. 1.Canvas 图形组合 通过 globalCompositeOperation = 属性 来指定重叠效 ...
- canvas图形绘制
前面的话 前面分别介绍了canvas的基础用法和进阶用法,本文将使用canvas的各种语法进行图形绘制 绘制线条 [绘制线条] 下面来尝试绘制一段线条 <canvas id="draw ...
- WPF 中Canvas图形移动、缩放代码
从Flash转C#,很多内容一知半解,边摸索边前进,代码粗糙,权当留个脚印. 只是想得到一个基础的移动和缩放功能的界面,找了很久都是画线.画矩形等基础形状的代码,移动和缩放说的并不清晰,只能自己努力来 ...
- canvas图形编辑器
原文地址:http://jeffzhong.space/2017/11/02/drawboard/ 使用canvas进行开发项目,我们离不开各种线段,曲线,图形,但每次都必须用代码一步一步的实现.有没 ...
- 小强的HTML5移动开发之路(6)——Canvas图形绘制基础
来自:http://blog.csdn.net/dawanganban/article/details/17686039 在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用 ...
- canvas功能函数
封装一下常用的函数, 输入:通过一些固定的值,得到一个圆形,一个心形,一个波浪,一个涟漪,一个抛物线,一个自由弹起的过程. 返回:x,y坐标. 注意: (1)坐标轴的位置,有的在0,0有的可能不在. ...
- HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- C#的Random到底该怎么使用
先看代码: 在循环中,有的只NEW一个Random,有的每次都NEW 一个Random. Console.WriteLine("1.多个Random,默认随机种子,"); ; i ...
- Mysql Explain 解读(基于MySQL 5.6.36)
Mysql Explain 解读(基于MySQL 5.6.36) 1.语法 explain < table_name > #例子 explain select * from t3 wher ...
- javascript第三章--引用类型
① Object类型 ② Array类型 ③ Date类型 ④ RegExp类型 ⑤ Function类型 ⑥ 基本包装类型 ⑦ 单体内置对象
- javascript 的继承
我们的JavaScript比较特别了,主要通过原型链实现继承的. 下面介绍各种实现继承的方式:原型链继承,借用构造函数,组合继承,原型式继承,寄生式继承,寄生组合式继承. 二.实现继承方式 1.原型链 ...
- WPF字符串中的换行符
<sys:String x:Key="NewUpdateWillShow" xml:space="preserve">第一行 第二行 </sy ...
- python 实用案例 supervisord管理进程详解
Supervisor是由python语言编写,基于linux操作系统的一款服务器管理工具,用以监控服务器的运行,发现问题能立即自动预警及自动重启等功能.Supervisor类似于monit,monit ...
- Maven引入jar的总结
Overview:显示maven项目的一些基本信息 Dependencies:添加jar包的页面 Plugins:添加maven插件的页面.比如tomcat-maven-plugin等 Reporti ...
- Nvidia TX2 Robot 环境配置记录
p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #454545 } p. ...
- js代码大全(各种方法、属性)《转载》
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.sr ...
- 用echartsjs 实现动态绘制折线、柱状等图形,并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...