【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"> & ...
随机推荐
- JMeter变量和调试取样器
变量 可以在测试计划中定义变量 可以通过${变量名}进行调用 调试取样器可以看到变量参数
- 变更（重命名）AD域名称
文章来自:https://blog.51cto.com/sxleilong/1377731 示例将域名contoso.com重命名为Corp.sxleilong.com 查看当前fsmo的5个角色. ...
- CentOS 7 部署 Seafile 服务器（使用 MySQL/MariaDB）
本文档用来说明通过预编译好的安装包来安装并运行基于 MySQL/MariaDB 的 Seafile 服务器.(MariaDB 是 MySQL 的分支) 提示:如果您是初次部署 Seafile 服务,我 ...
- dfs之迭代加深
为什么要用迭代加深 \(dfs\) 每次会选择搜索树的一个分支,不断深入,直到达到递归边界条件:但这种搜索策略带有一定的缺陷性: 如果搜索树的某一个分支中的节点个数特别多,但是答案并不在这棵子树里面, ...
- 04 链表（上）：如何实现LRU缓存淘汰算法？
一.什么是链表? 1.和数组一样,链表也是一种线性表. 2.从内存结构来看,链表的内存结构是不连续的内存空间,是将一组零散的内存块串联起来,从而进行数据存储的数据结构. 3.链表中的每一个内存块被称为 ...
- 斯坦福 UE4 C++ ActionRoguelike游戏实例教程 04.角色感知组件PawnSensingComponent和更平滑的转身
斯坦福课程 UE4 C++ ActionRoguelike游戏实例教程 0.绪论 概述 本文章对应课程第十一章 43.44节.本文讲述PawnSensingComponent中的视觉感知的使用,以及对 ...
- IPv6通过公网共享文件（Windows）
前言 之前讲了如何使用IPv6进行内网穿透,这种方案实现的穿透是免费且不限速的.那么实现穿透后,我们就可以将原本Windows自带的共享功能的范围从局域网扩大到整个公网,从而实现随时随地都能访问到共享 ...
- 温故而知新——MYSQL基本操作
相关连接: mysql和sqlserver的区别:https://www.cnblogs.com/vic-tory/p/12760197.html sqlserver基本操作:https://www. ...
- 物联网通信技术最全科普！你一定要了解的NB-IoT
摘要: NB-IoT(窄带蜂窝物联网)产业正在迅速崛起. 我们这一期的文章主要是普及一些NB-IoT通信技术的相关知识点.也希望你能get到属于自己的知识盲点! 一.前言 NB-IoT(窄带蜂窝物联网 ...
- WSDM Cup 2020大赛金牌参赛方案全解析
近日,在美国休斯敦闭幕的第13届网络搜索与数据挖掘国际会议(WSDM 2020)上,华为云语音语义创新Lab带领来自华南理工大学.华中科技大学.江南大学.武汉大学的四位学生组成的联合团队"X ...