zoukankan      html  css  js  c++  java
  • html5 canvas ( 填充图形的绘制 ) closePath, fillStyle, fill

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>canvas</title>
        <script type="text/javascript" src="../js/jQuery.js"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                outline: none;
                border: none;
            }
            #canvas{
                margin: auto auto;
                width: 7rem;
                margin: .25rem 0 0 1.5rem;
                border: 1px solid black;
            }
        </style>
    </head>
    <body> 
        <canvas id="canvas" width="1000" height="600"></canvas>
    </body>
    </html>
    <script type="text/javascript">
        /**
         * rem 布局初始化
         */
        $('html').css('font-size', $(window).width()/10);
        /**
         * 获取 canvas 画布
         * 获取 canvas 绘图上下文环境
         */
        var canvas = $('#canvas')[0];
        var context = canvas.getContext('2d');
        
        /**
         * canvas 填充的图形 ( 一个箭头为例 )
         */
        context.beginPath();
        context.lineTo(200, 200);
        context.lineTo(500, 200);
        context.lineTo(500, 100);
        context.lineTo(700, 250);
        context.lineTo(500, 400);
        context.lineTo(500, 300);
        context.lineTo(200, 300);
        
        //context.lineTo(200, 200); //当用这种方式封闭的时候, 当线条的粗细较宽时, 会出现瑕疵
        context.closePath(); //封闭一个图形, 没有瑕疵, 推荐使用
        
        context.fillStyle = 'yellow'; //填充封闭图形的颜色, 
        context.fill(); //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 ) 
        
        context.lineWidth = 5;
        context.stroke(); //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 ) 
    </script>
  • 相关阅读:
    自己写的一个后台模板
    php计算登陆时间差
    友盟推送,php简单代码
    rolling_curl curl批量采集函数留份
    PHP socket服务框架
    JS 画饼图,折线图
    jquery 日期插件
    JS 获取当前页面url,及锚点
    PHP 读取文件,返回二进制流
    各个数据库DataSource配置文件
  • 原文地址:https://www.cnblogs.com/lovling/p/6618002.html
Copyright © 2011-2022 走看看