【canvas】 绘制七巧板
效果图:
代码 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<canvas id="canvas" width="600" height="600" style="border-radius: 10px;">您的浏览器不支持canvas，请更换浏览器</canvas> <script> let canvas = document.getElementById("canvas"); let datas = [
{
p:[
{x:0,y:0},{x:600,y:0},{x:300,y:300}
],
color:"#3498db"
},
{
p:[
{x:0,y:0},{x:0,y:600},{x:300,y:300}
],
color:"#f1c40f"
},
{
p:[
{x:0,y:600},{x:300,y:600},{x:150,y:450}
],
color:"#e67e22"
},
{
p:[
{x:150,y:450},{x:300,y:300},{x:450,y:450},{x:300,y:600}
],
color:"#e74c3c"
},
{
p:[
{x:300,y:600},{x:600,y:300},{x:600,y:600},{x:300,y:600}
],
color:"#9b59b6"
},
{
p:[
{x:600,y:300},{x:450,y:450},{x:300,y:300},{x:450,y:150},{x:600,y:300}
],
color:"#2c3e50"
},
{
p:[
{x:600,y:0},{x:600,y:300},{x:450,y:150}
],
color:"#95a5a6"
},
] if(canvas.getContext("2d")){
let context = canvas.getContext("2d");
for (let i = 0; i < datas.length; i++) {
seniorDraw(datas[i].p,datas[i].color,context);
} } function seniorDraw(pies,color,context){
context.beginPath();
context.moveTo(pies[0].x,pies[0].y);
for (let i = 1; i < pies.length; i++) {
context.lineTo(pies[i].x,pies[i].y);
}
context.closePath();
context.fillStyle = color;
context.fill();
} // 普通绘制
function ordinaryDraw(){ let context = canvas.getContext("2d"); context.beginPath();
context.moveTo(0,0);
context.lineTo(600,0);
context.lineTo(300,300);
context.closePath();
context.fillStyle = "#3498db";
context.fill(); context.beginPath();
context.moveTo(0,0);
context.lineTo(0,600);
context.lineTo(300,300);
context.closePath();
context.fillStyle = "#f1c40f";
context.fill(); context.beginPath();
context.moveTo(0,600);
context.lineTo(300,600);
context.lineTo(150,450);
context.closePath();
context.fillStyle = "#e67e22";
context.fill(); context.beginPath();
context.moveTo(150,450);
context.lineTo(300,300);
context.lineTo(450,450);
context.lineTo(300,600);
context.closePath();
context.fillStyle = "#e74c3c";
context.fill(); context.beginPath();
context.moveTo(300,600);
context.lineTo(600,300);
context.lineTo(600,600);
context.lineTo(300,600);
context.closePath();
context.fillStyle = "#9b59b6";
context.fill(); context.beginPath();
context.moveTo(600,300);
context.lineTo(450,450);
context.lineTo(300,300);
context.lineTo(450,150);
context.lineTo(600,300);
context.closePath();
context.fillStyle = "#2c3e50";
context.fill(); context.beginPath();
context.moveTo(600,0);
context.lineTo(600,300);
context.lineTo(450,150);
context.closePath();
context.fillStyle = "#95a5a6";
context.fill();
} </script>
</body>
</html>
【canvas】 绘制七巧板的更多相关文章
- canvas,绘制七巧板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas练习 - 七巧板绘制
用到的方法: 注意点: stokeStyle等样式要在stroke前边 如果最后只有一个stroke或者fill,那么只填充最后一次路径的,之前的也会画出来但是没有填充看不到.所以每次begin+cl ...
- 【HTML5】Canvas绘制基础
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
- Canvas绘制图形
1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- [canvas]利用canvas绘制自适应的折线图
前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...
随机推荐
- 万界星空科技仓库管理wms系统
企业在管理库存时,尤其是生产制造企业,使用传统方式比如纸笔.Excel 管理库存,由于工具和信息化存在局限,导致在管理库存时出现如下问题: 1.通过纸笔记录出入库申请,人为手动计算易出错,数据易丢 ...
- Layui treeTable 使用【数据不显示、子级不显示】
//返回JSON数据类 public class LeaveMessageTreeTable { public LeaveMessageTreeTable() { this.children = ne ...
- 1.elasticsearch运行
在docker中运行elasticsearch.kibana 一.MacOs 首先需要安装doceker,提供两种方式,选一种方便的就好 1.命令行安装方式 安装命令行 xcode-select -- ...
- Java反序列化漏洞-CC1利用链分析
@ 目录 一.前置知识 1. 反射 2. Commons Collections是什么 3. 环境准备 二.分析利用链 1. Transformer 2. InvokeTransformer 执行命令 ...
- Head First 的学习之道
<Head First 设计模式>是一本好书,正如书的封面上说的那样,这是一本重视大脑的学习指南.里面提到了一些学习方法,可以尝试下,看看哪些对你有用: 1. 慢一点,理解的越多,需要记得 ...
- SQLite3使用笔记(1)——查询
目录 1. 概述 2. 详论 2.1. 打开/关闭数据库 2.2. 数据查询 3. 参考 1. 概述 SQLite是一个嵌入式SQL数据库引擎.与大多数其他 SQL 数据库不同,SQLite 没有单独 ...
- 通义千问，阿里版ChatGPT，拿到邀请码了
大家好,我是章北海mlpy 通义千问是阿里巴巴推出的一个大型预训练模型,是达摩院自主研发的超大规模语言模型,能够回答问题.创作文字,还能表达观点.撰写代码. 昨天中午,阿里云通过官方微信公众号对旗下的 ...
- 数据工程师必备的8项技能，不要只知道Python！
欢迎关注公众号:机器学习算法与Python实战(ID:tjxj666) 原作:Mohammed M Jubapu 译者:机器学习算法与Python实战(公众号ID:tjxj666) 英文:https: ...
- ZK--简介，部署
官网:https://zookeeper.apache.org/ 本文zk版本:3.7.0 一.简介 ZooKeeper 是一个高可用的分布式数据管理与系统协调软件,它可以为分布式应用提供状态同步.配 ...
- 【HZERO】feign调用
feign调用 https://open.hand-china.com/community/detail/603204901962649600 # Hiam获取用户信息示例