【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"> & ...
随机推荐
- 袋鼠云数栈前端从 Multirepo 到 Monorepo 研发效率提升探索之路
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值. 本文作者:星野 困境频生前端代码管理何解? 前端代码管理一直是困扰着 ...
- Windows手工入侵排查思路
文章来源公众号:Bypass Windows系统被入侵后,通常会导致系统资源占用过高.异常端口和进程.可疑的账号或文件等,给业务系统带来不稳定等诸多问题.一些病毒木马会随着计算机启动而启动并获取一定的 ...
- 基于 Docker 打造前端持续集成开发环境
基于 Docker 打造前端持续集成开发环境 写在前面: 这不是一篇有新意的文章,因为这篇文章半年前我就发布在其他平台上过,为什么在知乎上旧文新发? 除了想要把发布在其他地方的文章统一放到知乎上之外, ...
- windows环境下如何优雅搭建ftp服务？
目录 0. 前言 1.ftp简介 2.下载Apache FTPServer 3.下载并解压压缩包 4.修改配置文件 4.1 修改users.properties配置文件 4.2 修改ftpd-typi ...
- EFCore CodeFirst DBFirst Demo
1.简单Demo单独记录一下使用过程,Nuget对应.Net环境版本数据库包.EF Core 的 PMC 工具包. 2.CodeFirst 包管理器控制台(PMC)输入命令,迁移创建数据库: Add- ...
- KubeCon China 2023 | 拥抱开源，华为云原生华彩绽放
本文分享自华为云社区<KubeCon China 2023 | 拥抱开源,华为云原生华彩绽放>,作者: 云容器大未来 . 2023 年度云原生全球旗舰盛会 KubeCon + CloudN ...
- 掌数科技携手华为云GaussDB，助力金融科技创新，联合打造行业标杆
本文分享自华为云社区<掌数科技携手华为云GaussDB,助力金融科技创新,联合打造行业标杆>,作者:GaussDB 数据库 . 近日,在华为开发者大会2023(Cloud)的"G ...
- KAFKA EAGLE 监控MRS kafka之操作实践
本文分享自华为云社区<KAFKA EAGLE 监控MRS kafka之操作实践>,作者: 啊喔YeYe . 1.Kafka Eagle简介 Kafka eagle 是一款分布式.高可用的k ...
- 【火热招募】一文看懂华为云IoT Edge边缘计算开发者大赛技术亮点
摘要:第二届边缘计算开发者大赛已启动,赛程时间将从9月持续到12月,华为云IoT Edge · 边云协同赛道奖金池高达40万元. 近日,第二届边缘计算开发者大赛已启动(查看启动仪式),全球揭榜挂帅火热 ...
- 云小课｜大数据时代的隐私利器-GaussDB(DWS)数据脱敏
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: 数据仓库服务Ga ...