浅谈使用canvas绘制多边形
本文主要使用坐标轴的使用来绘制多边形,点位则都是在y轴上寻找,这种方法能够更好的理解图形与修改。
//id为html里canvas标签的属性id;
//x,y为坐标轴的起始位置,因为canvas默认坐标轴在左上角
//color为填充图形颜色
//...side为边,如果有5个参数则绘制出来的为五边形,6个就是六边形
var draw = function(id, x, y, color, ...side){
var c = document.getElementById(id);
var ctx = c.getContext("2d");
//移动起始坐标轴
ctx.translate(x,y);
ctx.fillStyle = color;
//坐标轴旋转的角度
var angle = 360/(side.length);
ctx.beginPath();
//第一个点位
ctx.moveTo(0,-side[0])
for(let i=1; i<side.length; i++){
//旋转坐标轴
ctx.rotate(angle*Math.PI/180);
ctx.lineTo(0,-side[i]);
}
//填充
ctx.fill();
ctx.closePath();
}
draw('mycanvas',50,50,'#F0F0F0',50,50,50,50,50,50);
draw('mycanvas',0,0,'#E0E0E0',25,25,25,25,25,25);
draw('mycanvas',0,0,'#FF9797',25,25,20,20,40,25);
这张图片是代码执行后的结果
浅谈使用canvas绘制多边形的更多相关文章
- canvas绘制多边形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript+canvas 绘制多边形
效果图: <body> <canvas id="square" width="500"></canvas> <canv ...
- 浅谈AndroidGPU过度绘制、GPU呈现模式分析及相关优化
在真机设备下有一个开发者选项,这个大家都知道,我们最常用的就打开'USB调试'功能,方便真机调试. 在这开发者选项中还有个选项,'调试GPU过度绘制' 这里选择第二个选项'显示过度绘制区域' 可以看到 ...
- (三)canvas绘制样式
beginPath() 对画线点的一个开始限制 moveTo() 画线的起点,只在开头使用 参数两个x轴,y轴 lineTo() 后续连线 两个参数x轴,y轴 stroke() 连线无填充 fill( ...
- 【转】Android Canvas的save(),saveLayer()和restore()浅谈
Android Canvas的save(),saveLayer()和restore()浅谈 时间:2014-12-04 19:35:22 阅读:1445 评论:0 收藏: ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- Android性能优化的浅谈
一.概要: 本文主要以Android的渲染机制.UI优化.多线程的处理.缓存处理.电量优化以及代码规范等几方面来简述Android的性能优化 二.渲染机制的优化: 大多数用户感知到的卡顿等性能问题的最 ...
- 转:浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
随机推荐
- luogu 2698 [USACO12MAR]花盆Flowerpot 单调队列
刷水~ Code: #include<bits/stdc++.h> using namespace std; #define setIO(s) freopen(s".in&quo ...
- sh_08_买苹果改进
sh_08_买苹果改进 # 1. 提示用户输入苹果的单价 price = float(input("苹果的单价:")) # 2. 提示用户输入苹果的重量 weight = floa ...
- jsoncpp 能做什么
jsoncpp能做什么1)跨平台跨语言动态信息数据交换.2)作为格式化配置文件使用3)对应数据结构数据类型做序列化和反序列化4)value::toStyledString 格式化json串输出 一.w ...
- Spring Cloud教程(九)应用程序上下文服务
Spring Boot对于如何使用Spring构建应用程序有一个看法:例如它具有常规配置文件的常规位置,以及用于常见管理和监视任务的端点.Spring Cloud建立在此之上,并添加了一些可能系统中所 ...
- 大数据笔记(十)——Shuffle与MapReduce编程案例(A)
一.什么是Shuffle yarn-site.xml文件配置的时候有这个参数:yarn.nodemanage.aux-services:mapreduce_shuffle 因为mapreduce程序运 ...
- K-th occurrence HDU - 6704 (后缀数组+二分线段树+主席树)
大意: 给定串s, q个询问(l,r,k), 求子串s[l,r]的第kk次出现位置. 这是一篇很好的题解: https://blog.csdn.net/sdauguanweihong/article/ ...
- 家用路由器网络设置DMZ区
2分钟看懂DMZ区 装载 原文链接 最近看到一个名词“DMZ区”,一直充满疑问,今天对其进行了查询,理解如下: 1.DMZ是什么? 英文全名“Demilitarized Zone”,中文含义是“隔离区 ...
- java开发客户端发送请求到服务器端出现这样:JSON parse error: Unexpected character ('}' (code 125)): was expecting
org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Unexpected cha ...
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_04 数据结构_4_数据结构_链表
查询慢,增删快. 绿色代表一条链 红色是另外一条链 .查询是从头开始查所以慢. 在300和55之间添加一个元素
- 常用模块random/os/sys/time/datatime/hashlib/pymysql等
一.标准模块 1.python自带的,import random,json,os,sys,datetime,hashlib等 ①.正常按照命令:打开cmd,执行:pip install rangdom ...