HTML5 Canvas ( 创建图形对象 ) createImageData

最新推荐文章于 2023-05-15 17:00:00 发布

weixin_30466421

最新推荐文章于 2023-05-15 17:00:00 发布

阅读量379

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lovling/p/6683466.html

版权

<!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>

转载于:https://www.cnblogs.com/lovling/p/6683466.html

weixin_30466421

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas ( 创建图形对象 ) createImageData

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script...
复制链接

扫一扫