【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"> & ...
随机推荐
- 【C#】【串口通信（Serial Port）】无法使用（using System.IO.Ports;）命名空间<Error：SerialPort不存在上下文>
1.包缺失导致--安装相应包: 2.等待命令行初始化--输入命令: Install-Package Microsoft.Windows.Compatibility -Version 5.0.2 参考网 ...
- 若依集成knife4j实现swagger文档增强
若依集成knife4j实现swagger文档增强 本期全是干货,这里我就当你用的非常熟练了,在ruoyi-admin模块中pom文件里加入以下依赖 注:引用knife4j-spring-boot-st ...
- 直击云栖|践行数据化运维，云掣重新解读MSP
2020年云栖大会百城汇·杭州站,云掣MSP专场圆满落幕! 本次云栖大会·云掣MSP专场以"数据智能,智能运维"为主题,主要聚焦企业云化转型演进趋势,云上运维全景监控以及云原生云环 ...
- 【scikit-learn基础】--『监督学习』之 决策树分类
决策树分类算法是一种监督学习算法,它的基本原理是将数据集通过一系列的问题进行拆分,这些问题被视为决策树的叶子节点和内部节点.决策树的每个分支代表一个可能的决策结果,而每个叶子节点代表一个最终的分类结果 ...
- ubuntu frame 个人开发心得
引言 有一次我在树莓派上安装 Ubuntu Core 我给创新创业项目开发一个可视化 gui 看板,用于展示数据. 然后我就找到了我需要的工具 Ubuntu Frame 初次尝试使用 Ubuntu F ...
- gmap构建离线地图，用createCustomerTiledLayer方法，瓦片地址尾部多了 ?x={x}&y={y}&z&{z} 导致无法显示地图。
gmap构建离线地图,用createCustomerTiledLayer方法,瓦片地址尾部多了 ?x={x}&y={y}&z&{z} 导致无法显示地图. function in ...
- 云图说丨初识华为云OrgID
本文分享自华为云社区<[云图说]第282期 初识华为云OrgID:轻松实现统一帐号.统一授权>,作者: 码上开花_Lancer. 组织成员帐号 OrgID是面向企业提供组织管理.企业成员帐 ...
- 保护客户代码和应用安全，CodeArts有7招
摘要:华为CodeArts致力于各种措施与方案,确保用户研发资产的安全. 华为云有IAM统一认证.CodeArts原名"DevCloud"上每个项目均设有权限管理机制. CodeA ...
- CWE发布2021年最危险的25种软件缺陷
摘要:CWE最危险的25种软件缺陷,是NVD过去两年中遇到的最常见和影响最大的问题指示性的列表. CWE Top25 可以帮助开发人员.测试人员和用户,以及项目经理.安全研究人员和教育工作者深入了解最 ...
- 如何使用参数化查询提高Cypher查询的性能
摘要:在DBMS中,参数化查询被视为一种有效预防SQL注入攻击的手段. 本文分享自华为云社区<使用参数化查询提高Cypher查询的性能:以华为云图引擎GES为例>,作者: 蜉蝣与海. 在D ...