【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"> & ...
随机推荐
- MES数据追溯常遇问题及解决方法
MES数据追溯常遇问题及解决方法: 在实际数字化工厂MES应用过程,由于设计或使用不当,数据追溯过程中也可能会存在诸多问题,常遇问题包括:1. 数据质量问题 可能存在数据录入错误.数据缺失或不完整等情 ...
- 从零玩转Activiti7工作流-2021-09-12-16-22-07
title: 从零玩转Activiti7工作流 date: 2021-09-12 16:22:08.51 updated: 2021-12-26 17:43:12.171 url: https://w ...
- Python——第四章：闭包（Closure）、装饰器（Decorators）
闭包: 本质, 内层函数对外层函数的局部变量的使用. 此时内层函数被称为闭包函数 1. 可以让一个变量常驻与内存,可随时被外层函数调用. 2. 可以避免全局变量被修改.被污染.更安全.(通 ...
- 掌握语义内核(Semantic Kernel)：如何精进你的提示词工程
在人工智能的海洋里,大型语言模型(LLM AI)是高速发展的一艘巨轮,而有效地与其沟通和指导其行为的锚,正是提示语(prompts).提示语是我们提供给模型的输入或查询,以期获取特定的响应.当今,提示 ...
- CSS 基础 2 - Box Model 盒模型
CSS 基础 2 - Box Model 盒模型 Box Model 盒模型是网页布局的前提.网页布局的几种方式: Table(过时):在 CSS 出现之前,一般用表格布局(将表格边框线隐藏) Flo ...
- 神经网络基础篇：梯度下降法（Gradient Descent）
梯度下降法 梯度下降法可以做什么? 在 测试集上,通过最小化代价函数(成本函数)\(J(w,b)\)来训练的参数\(w\)和\(b\), 如图,在第二行给出和之前一样的逻辑回归算法的代价函数(成本函数 ...
- 零代码修改，教你Spring Cloud应用轻松接入CSE
摘要:本文介绍了Sermant Agent的接入原理和如何使用Sermant Agent无修改接入CSE. 本文分享自华为云社区<Spring Cloud应用零代码修改接入华为云微服务引擎CSE ...
- JVM面试必问：G1垃圾回收器
摘要:G1垃圾回收器是一款主要面向服务端应用的垃圾收集器. 本文分享自华为云社区<JVM面试高频考点:由浅入深带你了解G1垃圾回收器!!!>,原文作者:Code皮皮虾 . G1垃圾回收器介 ...
- GaussDB(DWS) NOT IN优化技术解密：排他分析场景400倍性能提升
摘要:本文针对8.1.2版本中的NOT IN场景的Mixed-HashJoin新技术进行介绍.该技术在GaussDB(DWS)与招商银行的联创项目中落地,为招商银行的批量作业带来了总体15%的性能提升 ...
- 想了解Xtrabackup备份原理和常见问题分析，看这篇就够了
摘要:本文来自华为云MySQL研发团队,主要分享了MySQL备份工具Xtrabackup的备份过程.华为云数据库团队对其做的优化改进,以及在使用中可能遇到的问题与解决方法. 本文分享自华为云社区< ...