zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    VC 常见问题百问
    python windows 环境变量
    Check server headers and verify HTTP Status Codes
    Where are the AES 256bit cipher suites? Please someone help
    outlook 如何预订会议和会议室
    安装Axis2的eclipse插件后,未出现界面
    windows 环境变量
    python 时间日期处理汇集
    openldap学习笔记(使用openldap2.3.32)
    set p4 environment in windows
  • 原文地址:https://www.cnblogs.com/YAN-HUA/p/9215009.html
Copyright © 2011-2022 走看看