【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"> & ...
随机推荐
- NetSuite 开发日记 —— 事务处理行限制
一.创建行限制 在 NetSuite 中处理事务时,一次可访问的记录.事务处理或数据行数限制为 10,000.除非另有说明,此限制适用于所有交易类型.超过 1,000 行可能会对 Netsuite 的 ...
- 漆包线工厂生产管理MES系统解决方案
漆包线行业老板痛点: 1.漆包线比较传统的行业,一般都是靠人工去管理,老板想及时知道工厂的生产,销售.出入库.库存情况: 2.型号多称重打印易错,没有系统前 :称重打印,出入库,财务脱节,库存和 ...
- GPT-4多模态大型语言模型发布
GPT-4 模型是OpenAI开发的第四代大型语言模型(LLM),它将是一个多模态模型,会提供完全不同的可能性-例如文字转图像.音乐甚至视频.GPT 全称为 Generative Pre-traine ...
- ElasticSearch之Search settings
相关参数 indices.query.bool.max_clause_count 本参数当前已失效. search.max_buckets 本参数用于控制在单个响应中返回的聚合的桶的数量. 默认值为6 ...
- 【ASP.NET Core】使用SignalR推送服务器日志
一个多月前接手了一个产线机器人项目,上位机以读写寄存器的方式控制机器人,服务器就是用 ASP.NET Core 写的 Web API.由于前一位开发者写的代码质量问题,导致上位机需要16秒才能启动.经 ...
- 红日靶场4-wp
红日靶场4 环境搭建 注:130网段为模拟外网网段,111网段为内网网段 机器 用户 密码 网卡 kali root / 192.168.130.19 web(ubuntu) ubuntu ubunt ...
- JVM学习-程序编译与优化
原文链接:https://gaoyubo.cn/blogs/89d6d9be.html 一.前端编译与优化 Java技术下讨论"编译期"需要结合具体上下文语境,因为它可能存在很多种 ...
- FreeMark模板基本知识
FreeMarker模板基础知识 1.FreeMarker与jsp.Thymeleaf并排为三大模板引擎,用于把后端数据渲染到页面上,降低耦合度.动态数据+占位符+静态页面标签构成动态页面. 2.Fr ...
- LeetCode1两数之和、15三数之和
1. 两数之和 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,数组中同一个元素 ...
- 中秋佳节，程序员教你AI三步成诗，秒变“李白”
摘要:举杯邀明月,用技术来附庸风雅. 中秋佳节来临之际,你是否开始思念远方的亲朋好友,想为他们送上祝福?又或是与家人团圆赏月之时,希望借一段风雅诗词抒情达意? 华为云的开发者们教你一招,来个技术风的A ...