zoukankan      html  css  js  c++  java
  • html5 canvas ( 创建图形对象 ) createImageData

    <!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="800" height="800"></canvas>
        <img id="img" src="" />
    </body>
    </html>
    <script type="text/javascript">
        /**
         * rem 布局初始化
         */
        $('html').css('font-size', $(window).width()/10);
        /**
         * 获取 canvas 画布
         * 获取 canvas 绘图上下文环境
         */
        var canvas = $('#canvas')[0];
        var cxt = canvas.getContext('2d');
        
        /**
         * 创建图形数据对象 
         * createImageData(宽, 高)
         */
        var imgData = cxt.createImageData(canvas.width, canvas.height);
        var pxData = imgData.data;
        for(var i = 0; i < canvas.width; i++){
            for(var j = 0; j < canvas.height; j++){
                var p = canvas.width*i+j;
                pxData[4*p+0] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2),2)*255);
                pxData[4*p+1] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2-2*Math.acos(-1)/3),2)*255);
                pxData[4*p+2] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2+2*Math.acos(-1)/3),2)*255);
                pxData[4*p+3] = 255;
            }
        }
        cxt.putImageData(imgData, 0,0,0,0,canvas.width,canvas.height);
    </script>
  • 相关阅读:
    css样式的六种选择器
    css 颜色表示法
    css 文本设置
    “http”和“https”的区别是什么?优缺点是什么?
    Httpclient
    接口认证:Bearer Token(Token 令牌)
    哪个参数用来区分请求来自客户(手机)端还是服务器(PC)端?
    常用的HTTP响应头
    Http 请求头包含哪些信息?
    单例集合的体系
  • 原文地址:https://www.cnblogs.com/lovling/p/6683466.html
Copyright © 2011-2022 走看看