canvas 入门－利用 canvas 制做一个七巧板

时间  2019-11-07
标签 canvas 入门 利用 制做 一个 七巧板 繁體版
原文   原文链接

 简介

<canvas> 是 HTML5 新增的元素之一，它容许脚本语言动态渲染位图像。最初是由 Apple 引入，用于 Mac OS X 的仪表盘，后来又在 Safiri 和 Google Chrome 中被实现。 <canvas> 就像个神奇的画布，你能够在上面画出你想要的绚丽的效果。使用<canvas>元素以前，须要一些基本的 HTML 和 Javascript 知识。<canvas> 元素不被一些老的浏览器支持，可是主流的高级浏览器都支持。javascript

基本用法

1. <canvas> 元素css

<canvas id = "canvas" width ="200px" height="200px“ style="border: 1px solid #0000ff; display: block; margin: 50px auto" >
您的浏览器不支持canvas！
</canvas>

若是没有设置宽度和高度的时候，canvas 会默认设置宽为300px，高为150px。当浏览器不支持 canvas 时，会将中间的文字打印出来。上面代码中，为了让画布更加明显，添加了css 样式便于查看。html

2. 渲染上下文java

canvas 元素创造了一个固定大小的画布，而且公开了渲染上下文对象，它能够用来绘制和处理要展现的内容。Canvas API 定义在 context这个对象上，所以要用getContext方法来获取这个对象。canvas

var canas = document.getElementById("canvas");
// 绘制2D图像的上下文环境
var context = canvas.getContext("2d");

上面代码中，getContext方法指定参数‘2d’，表示该canvas对象绘制2d图像，执行后的效果为下图一个蓝色边框的举重的矩形。浏览器

截图.png

3. 栅格函数

在绘制图像以前，咱们要先了解什么是栅格，一般来讲网格中的一个单元至关于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。全部元素的位置都相对于原点定位。因此图中蓝色方形左上角的坐标为距离左边（Y轴）x像素，距离上边（X轴）y像素（坐标为（x,y））。优化

Canvas_default_grid.png

4. 绘制图像ui

好，如今能够开始绘制图像了，首先要了解下绘制 moveTo()这个方法。spa

  • 移动笔触 - 这个方法实际上并不能画出任何东西，它就是起到移动笔触的做用，而且做为起始点。

    moveTo(x, y)将笔触移动到指定的坐标x以及y上。

  • 线 - 绘制直线，须要用到的方法lineTo()。

    lineTo(x, y)绘制一条从当前位置到指定x以及y位置的直线。
    该方法有两个参数：x以及y ，表明坐标系中直线结束的点。开始点和以前的绘制路径有关，以前路径的结束点就是接下来的开始点，等等。。。开始点也能够经过moveTo()函数改变。
    //绘制线条1
context.moveTo(0,0);
context.lineTo(100,100);
context.stroke();

    line.png

  • 路径
    图形的基本元素是路径。路径是经过不一样颜色和宽度的线段或曲线相连造成的不一样形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形须要一些额外的步骤。

首先，要建立路径起始点，而后使用画图命令去画出路径，以后封闭路径。一旦路径生成，就能经过描边或填充路径区域来渲染图形。

经常使用到的函数：

beginPath()    新建一条路径，生成以后，图形绘制命令被指向到路径上生成路径。
closePath()    闭合路径以后图形绘制命令又从新指向到上下文中。
stroke()       经过线条来绘制图形轮廓。
fill()         经过填充路径的内容区域生成实心的图形。

生成路径的第一步叫作beginPath()。本质上，路径是由不少子路径构成，这些子路径都是在一个列表中，全部的子路径（线、弧形、等等）构成图形。而每次这个方法调用以后，列表清空重置，而后咱们就能够从新绘制新的图形。

第二步就是调用函数指定绘制路径，本文稍后咱们就能看到了。

第三，就是闭合路径closePath(),不是必需的。这个方法会经过绘制一条从当前点到开始点的直线来闭合图形。若是图形是已经闭合了的，即当前点为开始点，该函数什么也不作。

了解完这些后，咱们就可以开始做出咱们要的七巧板了～

七巧板

首先，新建一个画布

<canvas id="canvas" style="display: block; margin: 60px auto;"></canvas>

接着，为这个画布添加事件

window.onload = function(){
            var canvas = document.getElementById("canvas");
            canvas.width = 600;
            canvas.height = 600;
            //绘制2d图像的上下文环境
            var context = canvas.getContext("2d");

            //绘制左边平行四边形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(150,450);
            context.lineTo(450,450);
            context.lineTo(300,600);
            context.lineTo(0,600);
            context.fillStyle = "#FF1493";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //绘制左边的大三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(0,0);
            context.lineTo(300,300);
            context.lineTo(0,600);
            context.fillStyle = "#0000ff";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //绘制右边的大三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(0,0);
            context.lineTo(300,300);
            context.lineTo(600,0);
            context.fillStyle = "#FFFF00";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //绘制中间三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(300,300);
            context.lineTo(150,450);
            context.lineTo(450,450);
            context.fillStyle = "#FF7F50";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();


            //绘制中间小矩形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(450,150);
            context.lineTo(300,300);
            context.lineTo(450,450);
            context.lineTo(600,300);
            context.fillStyle = "#191970";
            context.strokeStyle ="#000000";
            context.fill();
            context.stroke();

            
            //绘制最右边小三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(600,0);
            context.lineTo(450,150);
            context.lineTo(600,300);
            context.fillStyle = "#A52A2A";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //绘制右边大三角形
            context.beginPath();
            context.lineWidth = 5;
            context.moveTo(600,300);
            context.lineTo(300,600);
            context.lineTo(600,600);
            context.fillStyle = "#00FFFF";
            context.strokeStyle = "#000000";
            context.fill();
            context.stroke();

            //绘制最外围的边框
            context.beginPath();//开始绘制路径
            context.lineWidth = 10;//设置线条的宽度
            context.moveTo(0,0);//移动笔触
            context.lineTo(600,0);//绘制线条
            context.lineTo(600,600);
            context.lineTo(0,600);
            context.closePath();//封闭路径
            context.stroke();//经过线条来绘制图形轮廓
        };

优化版本：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>canvas</title>
</head>
<body>
    <!-- 优化七巧板，将模型数据用数据存储起来，逐个取出并绘制。 -->
    <canvas id="canvas" style="border: 1 px solid #aaa; display: block; margin: 50px auto">
        当前浏览器不支持cnavas        
    </canvas>
    <script type="text/javascript">
    var tangram = [
        {
            f:[{x: 0,y: 0},{x: 800, y: 0},{x: 400, y: 400}],
            color: "#FEF734",
        },
        {
            f:[{x: 0,y: 0},{x: 400, y: 400},{x: 0, y: 800}],
            color: "#224AFB",
        },
        {
            f:[{x: 800,y: 0},{x: 600, y: 200},{x: 800, y: 400}],
            color: "#A82F24",
        },
        {
            f:[{x: 400,y: 400},{x: 600, y: 200},{x: 800, y: 400},{x: 600, y: 600}],
            color: "#141D71",
        },
        {
            f:[{x: 400,y: 400},{x: 200, y: 600},{x: 600, y: 600}],
            color: "#F17E4D",
        },
        {
            f:[{x: 200,y:  600},{x: 600, y: 600},{x: 400, y: 800},{x: 0, y: 800}],
            color: "##EC4F93",
        },
        {
            f:[{x: 800,y: 400},{x: 400, y: 800},{x: 800, y: 800}],
            color: "#6CF8FC",
        },
    ];
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = 800;
        canvas.height = 800;
        for(var i = 0; i< tangram.length; i++){
            ctx.beginPath();
            ctx.moveTo(tangram[i].f[0].x, tangram[i].f[0].y);
            for (var j= 1; j < tangram[i].f.length; j++){
                ctx.lineTo(tangram[i].f[j].x, tangram[i].f[j].y);
            }
            ctx.closePath();
            ctx.fillStyle = tangram[i].color;
            ctx.fill();
            ctx.lineWidth = 10;
            ctx.stroke();
        }
        //重绘最外层边框
        ctx.lineWidth = 20;
        ctx.strokeRect(0,0,800,800);
    }

    </script>
</body>
</html>

一个简单的七巧板就出来啦～

七巧板.png

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程