zoukankan      html  css  js  c++  java
  • [ html drawImage createPattern ] canvas绘制图片 drawImage 属性图片平铺方式实例演示

    <!DOCTYPE html>
    <html lang='zh-cn'>
    <head>
    <title>Insert you title</title>
    <meta name='description' content='this is my page'>
    <meta name='keywords' content='keyword1,keyword2,keyword3'>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel='stylesheet' type='text/css' href='./css/index.css' />
    <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
    <style type='text/css'>
    html,body {
        margin: 0; padding: 0;
    }
    
    html {
        background: #999; height: 100%;
    }
    
    #can {
        background: #FFF; display: block; margin: 75px auto; border-radius: 2px;
    }
    </style>
    <script type='text/javascript'>
        $( function(){
            var canvas = $( '#can' ).get( 0 );
            var oCan = canvas.getContext( '2d' );
            var img = new Image(); /* 新建图片对象 */
            img.src = './images/bg.jpg';
            img.onload = createBg; /* 图片预加载技术 */
            function createBg(){
                var bg = oCan.createPattern( img , 'repeat' ); /* 图片的平铺方式 repeat repeat-x repeat-y no-repeat */
                oCan.fillStyle = bg;    /* 请注意 : fillStyle 填充样式这个属性不仅可以设置颜色还可以设置背景图片 */
                oCan.fillRect( 250-99 , 250-127 , canvas.width , canvas.height );
            }
        } );
    </script>
    </head>
    <body>
        <canvas id='can' width='500' height='500'>您的浏览器版本过低,请升级您的浏览器以获取更好的用户体验...</canvas>
    </body>
    </html>
  • 相关阅读:
    第十三周课程总结
    第十二周学习总结
    第十一周课程总结
    第十周课程总结
    第九周课程总结&实验报告(七)
    第八周课程总结&实验报告(六)
    第七周课程总结&实验报告(五)
    第六周学习总结&java实验报告四
    课程总结
    第十四周学习总结&课程实验报告
  • 原文地址:https://www.cnblogs.com/mysearchblog/p/5762451.html
Copyright © 2011-2022 走看看