【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"> & ...

随机推荐

springboot去除内嵌tomcat
springboot去除内嵌tomcat步骤在pom文件中加入以下代码点击查看代码  <dependency> <grou ...
微信小程序中业务域名的配置
需要配置业务域名,需要先将域名http转https 1,首先在该微信小程序的公众号平台中下载业务域名的证书 2,将下载的证书放进nginx的根目录 3,在nginx中 (root为.txt的地址)
LeetCode 二分查找篇（69、33、704）
69. x 的平方根实现 int sqrt(int x) 函数. 计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数,结果只保留整数的部分,小数部分将被舍去. 示例 1: 输入: ...
手把手教你使用ModelArts的自动学习识别毒蘑菇分类
摘要:本文介绍了ModelArts如何通过自动学习进行毒蘑菇的识别. 想当年,白雪公主吃了毒蘑菇,换来了白马王子的一吻.如果白雪公主没有吃毒蘑菇,还会遇到白马王子吗?张小白觉得不见得--说不定她会遇到 ...
一文总结GaussDB通信原理知识
摘要:从发展历程到通信模型设计,到你了解一下GaussDB通信原理知识. MPPDB通信库发展历程 Postgres-XC 方法:采用libpq通信库实现CN和DN之间的连接,CN负责计算,DN仅进行 ...
Vuex在TSX中的改造方案：TS改造Vue2项目Vuex如何处置？
vuex目前比较流行的有:vuex-aggregate . vuex-class.vuex-module-decorators npm搜到相关的,看下趋势图:https://www.npmtrends ...
Linux上非root用户jdk环境变量配置
1.设置用户环境变量vi .bash_profile 或者是 vi ~/.bashrc 2.JAVA_HOME=/home/sgmm/jdk1.6.0_13 CLASSPATH=$JAVA_HOME/ ...
SpringBoot Docker 发布到阿里仓库
1. 创建仓库管理里面,可以查看详细的信息设置登录密码 2. 接下来,将本地镜像推到阿里 : SpringBoot Docker 发布 docker commit 这部分可以不操作 docker ...
【Cpp】RTTI 机制原理解析
References Baidu Wiki C++中的RTTI机制详解 RTTI 推荐阅读: RTTI 原理推荐阅读:C++中的RTTI机制什么是RTTI机制? RTTI 是"Runti ...
POJ 2484博弈——对称法
题目链接:http://poj.org/problem?id=2484 题意:Alice和Bob玩游戏,从一堆圆环形排列的硬币中拿硬币,每次可以拿一个或者两个,但必须拿连续的(两个中间有空位也视为不连 ...

【canvas】 绘制七巧板

【canvas】 绘制七巧板的更多相关文章

随机推荐

热门专题

【canvas】绘制七巧板

【canvas】绘制七巧板的更多相关文章