canvas基础入门绘制线条三角形七巧板

Posted yan-hua

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas基础入门绘制线条三角形七巧板相关的知识,希望对你有一定的参考价值。

复杂的内容都是有简单的线条结合而成的,想要绘制出复杂好看的内容先从画直线开始

canvas绘制直线先认识几个函数

beginPath();开始一条路径,或重置当前的路径

moveTo(x,y);用于规定直线的起点坐标

lineTo(x,y);用于规定直线的终点坐标

closePath();方法创建从当前点到开始点的路径

stroke();方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色

利用上面的函数就可以简单的画出直线了

 

代码

<canvas id="canvas" style="border: 1px solid #000;">当前浏览器不支持canvas,请更换浏览器再试</canvas>
<script type="text/javascript">
    window.onload = function() {

        var canvas = document.getElementById("canvas");
       canvas.width = 1024;//设置canvas宽高
       canvas.height = 768;
       var context = canvas.getContext("2d");
        context.beginPath();
       context.moveTo(100, 100);
       context.lineTo(700, 700);
        context.closePath();
        context.stroke();
    }
</script>

 

接下来个直线添加点样式:

lineWidth;属性设置或返回当前线条的宽度,以像素计

strokeStyle;属性设置或返回用于笔触的颜色、渐变或模式

fillStyle;属性设置或返回用于填充绘画的颜色、渐变或模式

fill();方法填充当前的图像(路径)。默认颜色是黑色

JavaScript代码如下:

<canvas id="canvas" style="border: 1px solid #000;">当前浏览器不支持canvas,请更换浏览器再试</canvas>
<script type="text/javascript">
    window.onload = function() {

        var canvas = document.getElementById("canvas");
      canvas.width = 1024;//设置canvas宽高
      canvas.height = 768;
      var context = canvas.getContext("2d");
        context.beginPath();
      context.moveTo(100, 100);
      context.lineTo(700, 700);
        context.closePath();
     context.lineWidth
= 5;
    context.strokeStyle
= "red"; context.stroke(); } </script>

 

会绘制直线后我们接着来绘制一些图像,要绘制图像也是使用lineTo(x,y),绘制三角形,代码如下

<canvas id="canvas" style="border: 1px solid #000;">当前浏览器不支持canvas,请更换浏览器再试</canvas>
<script type="text/javascript">
    window.onload = function() {

        var canvas = document.getElementById("canvas");
       canvas.width = 1024;//设置canvas宽高
       canvas.height = 768;
       var context = canvas.getContext("2d");
         context.beginPath();
       context.moveTo(100, 100);
       context.lineTo(700, 700);
      context.lineTo(100, 700);
      context.lineTo(100, 100);
         context.closePath();
         context.lineWidth = 5;
      context.strokeStyle = "red";
         context.stroke();
    }
</script>

 

这个时候在是实现一些复杂的图像,七巧板:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>canvas绘制七巧板</title>
    </head>

    <body>
        <canvas id="canvas" style="border: 1px solid #aa;display: block;margin: 50px auto;">
            当前浏览器不支持Canvas,请更换浏览器再试
        </canvas>

        <script type="text/javascript">
            var tangram = [
                    {p: [{x: 0,y: 0}, {x: 800,y: 0}, {x: 400,y: 400}],color: "#caff76"},
                    {p: [{x: 0,y: 0}, {x: 400,y: 400}, {x: 0,y: 800}],color: "#67becf"},
                    {p: [{x: 800,y: 0}, {x: 800,y: 400}, {x: 600,y: 600}, {x: 600,y: 200}],color: "#ef3d61"},
                    {p: [{x: 600,y: 200}, {x: 600,y: 600}, {x: 400,y: 400}],color: "#f9f51a"},
                    {p: [{x: 400,y: 400}, {x: 600,y: 600}, {x: 400,y: 800}, {x: 200,y: 600}],color: "#a594c0"},
                    {p: [{x: 200,y: 600}, {x: 400,y: 800}, {x: 0,y: 800}],color: "#fa8ecc"},
                    {p: [{x: 800,y: 400}, {x: 800,y: 800}, {x: 400,y: 800}],color: "#f6ca29"},
            ];

            window.onload = function() {
                var canvas = document.getElementById("canvas");

                canvas.width = 800;
                canvas.height = 800;

                var context = canvas.getContext("2d");

                for(var i = 0; i < tangram.length; i++) {
                    draw(tangram[i], context)
                }
            }

            function draw(plece, cxt) {
                cxt.beginPath();
                cxt.moveTo(plece.p[0].x, plece.p[0].y);
                for(var i = 1; i < plece.p.length; i++) {
                    cxt.lineTo(plece.p[i].x, plece.p[i].y);
                }
                cxt.closePath();
                cxt.fillStyle = plece.color;
                cxt.fill();

                cxt.strokeStyle = "black";
                cxt.lineWidth = 3;
                cxt.stroke();
            }
        </script>
    </body>

</html>

 



以上是关于canvas基础入门绘制线条三角形七巧板的主要内容,如果未能解决你的问题,请参考以下文章

canvas绘制七巧板

canvas的基础使用。

canvas,绘制七巧板

canvas 入门-利用 canvas 制作一个七巧板

12 canvas 画布 - 基础

canvas图形绘制