Canvas控制叠加

在这里插入图片描述

叠加风格

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>
        选择叠加风格：<select  style="width: 160px" onchange="draw(this.value);";>
        <option value="source-over">source-over</option>
        <option value="source-in">source-in</option>
        <option value="source-out">source-out</option>
        <option value="destination-over">destination-over</option>
        <option value="destination-in">destination-in</option>
        <option value="destination-out">destination-out</option>
        <option value="destination-atop">destination-atop</option>
        <option value="lighter">lighter</option>
        <option value="xor">xor</option>
        <option value="copy">copy</option>
        </select><br>
        <canvas id="mc" width="480" height="272"
            style="border: 1px solid black;"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("mc");
            var ctx = canvas.getContext("2d");
            var draw = function(compositeOper)
            {
                ctx.save();
                ctx.clearRect(0, 0, 400, 200);
                ctx.fillStyle = '#f00';
                ctx.fillRect(30, 20, 160, 100);
                ctx.globalCompositeOperation = compositeOper;
                ctx.fillStyle = '#0f0';
                ctx.fillRect(120, 60, 160, 100);
                ctx.restore();
            }
            draw("source-over");
        </script>
    </body>
</html>

在这里插入图片描述

线性渐变

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;"/>
        <meta charset="utf-8"/>
        <title>线性渐变</title>
    </head>
    <body>
        <canvas id="mc" width="400" height="280"
            style="border: 1px solid black;"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("mc");
            var ctx = canvas.getContext("2d");
            ctx.save();
            ctx.translate(30, 20);
            // 创建线性渐变
            lg = ctx.createLinearGradient(0, 0, 160, 80);
            // 向线性渐变添加颜色
            lg.addColorStop(0.2, "#f00");
            lg.addColorStop(0.5, "#0f0");
            lg.addColorStop(0.9, "#00f");
            // 设置使用线性渐变作为填充颜色
            ctx.fillStyle = lg;
            // 填充一个矩形
            ctx.fillRect(0, 0, 160, 80);
            // 恢复坐标系统
            ctx.restore();
            // 平移坐标系统
            ctx.translate(280, 160);
            ctx.beginPath();
            // 添加圆弧
            ctx.arc(0, 0, 80, 0, Math.PI*2, true);
            ctx.closePath();
            ctx.lineWidth = 12;
            // 再次创建线性渐变
            lg2 = ctx.createLinearGradient(-40, -40, 80, 50);
            // 向线性渐变上添加颜色
            lg2.addColorStop(0.1, "#ff0");
            lg2.addColorStop(0.4, "#0ff");
            lg2.addColorStop(0.8, "#f0f");
            // 设置使用线性渐变作为边框颜色
            ctx.strokeStyle = lg2;
            ctx.stroke();
        </script>
    </body>
</html>

在这里插入图片描述

圆形渐变

<!DOCTYPE html>
<html>
    <head>
        <title>圆形渐变</title>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    </head>
    <body>
        <canvas id="mc" width="400" height="280"
            style="border:1px solid black"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("mc");
            var ctx = canvas.getContext("2d");
            ctx.save();
            ctx.translate(30, 20);
            // 创建圆形渐变
            lg = ctx.createRadialGradient(80, 40, 5, 80, 40, 60);
            // 向圆形渐变添加颜色
            lg.addColorStop(0.2, "#f00");
            lg.addColorStop(0.5, "#0f0");
            lg.addColorStop(0.9, "#00f");
            // 使用圆形渐变作为填充颜色
            ctx.fillStyle = lg;
            ctx.fillRect(0, 0, 160, 80);
            // 恢复坐标系统
            ctx.restore();
            // 平移坐标系统
            ctx.translate(280, 160);
            ctx.beginPath();
            // 添加圆弧
            ctx.arc(0, 0, 80, 0, Math.PI *2, true);
            ctx.closePath();
            ctx.lineWidth = 12;
            // 再次创建圆形渐变
            lg2 = ctx.createRadialGradient(0, 0, 5, 0, 0, 80);
            // 向圆形渐变添加颜色
            lg2.addColorStop(0.1, "#ff0");
            lg2.addColorStop(0.4, "#0ff");
            lg2.addColorStop(0.8, "#f0f");
            // 使用圆形渐变作为填充颜色
            ctx.fillStyle = lg2;
            ctx.fill();

        </script>
    </body>    
</html>

在这里插入图片描述

位图填充

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Context-Type" content="text/html;" />
    <meta charset="utf8" />
    <title>位图填充</title>
    </head>
    <body>
        <canvas id="mc" width="400" height="272"
            style="border: 1px solid black;"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("mc");
            var ctx = canvas.getContext("2d");
            ctx.save();
            ctx.translate(30, 20);
            var image = new Image();
            image.src = "../../static/logo.png";
            image.onload = function()
            {
                // 创建位图填充
                imagePattern = ctx.createPattern(image, "repeat");
                // 设置使用位图填充作为填充颜色
                ctx.fillStyle = imagePattern;
                // 填充一个矩形
                ctx.fillRect(0, 0, 160, 80);
                // 恢复坐标系统
                ctx.restore();
                // 平移坐标系统
                ctx.translate(280, 160);
                ctx.beginPath();
                // 添加圆弧
                ctx.arc(0, 0, 80, 0, Math.PI*2, true);
                ctx.closePath();
                ctx.lineWidth = 12;
                // 设置使用位图填充位边框颜色
                ctx.strokeStyle = imagePattern;
                ctx.stroke();
            }
        </script>
    </body>
</html>

在这里插入图片描述

位图裁剪

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Context-Type" content="text/html;"/>
        <meta charset="utf8"/>
        <title>位图裁剪</title>
    </head>
    <body>
        <canvas id="mc" width="400" height="260"
            style="border: 1px solid black;"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("mc");
            var ctx = canvas.getContext("2d");
            var dig = Math.PI /20;
            var count = 0;
            var image = new Image();
            image.src = "../../static/logo.png";
            image.onload = function()
            {
                // 指定每隔0.15秒调用一次addRadial函数
                setInterval("addRadial();", 150);
            }
            var addRadial = function()
            {
                // 保存当前的绘图状态
                ctx.save();
                // 开始创建路径
                ctx.beginPath();
                // 添加一段圆弧
                ctx.arc(200, 130, 200, 0, dig * ++count, false);
                // 让圆弧连接到圆心
                ctx.lineTo(200, 130);
                // 关闭路径
                ctx.closePath();
                // 剪切路径
                ctx.clip();
                // 此时绘制的图片只有路径覆盖的部分才会显示出来
                ctx.drawImage(image, 124, 20);
                ctx.restore();
            }
        </script>
    </body>
</html>

改变透明度

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Context-Type" content="text/html;"/>
        <meta charset="utf8" />
        <title>改变透明度</title>
    </head>
    <body>
        <img src="../../static/logo.png" alt="logo">
        <canvas id="mc" width="400" height="260"
            style="border: 1px solid black;"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("mc");
            var ctx = canvas.getContext("2d");
            var image = new Image();
            image.src = "../../static/logo.png";
            image.onload = function()
            {
                // 用带透明度参数的方法绘制图片
                drawImage(image, 72, 72, 0.4);
            }
            var drawImage = function(image, x, y, alpha)
            {
                // 绘制图片
                ctx.drawImage(image, x, y);
                // 获取从x,y开始，宽为image.width， 高为image.height的图片数据
                var imgData = ctx.getImageData(x, y, image.width, image.height);
                for (var i=0, len = imgData.data.length; i<len; i+=4)
                {
                    // 改变每个像素的透明度
                    imgData.data[i+3] = imgData.data[i+3] * alpha;
                }
                // 将获取的图片数据放回去
                ctx.putImageData(imgData, 72, 72);
            }
        </script>
    </body>
</html>

在这里插入图片描述

图片高亮

<!DOCTYPE html>
<html>
    <head>
        <title>图片高亮</title>
        <meta http-equiv="Content-Type" content="text/html;"/>
        <meta charset="utf-8">
    </head>
    <body>
        <canvas id="mc" width="400", height="300"
            style="border: 1px solid black;"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("mc");
            var ctx = canvas.getContext("2d");
            var image = new Image();
            image.src = "../../static/logo.png";
            image.onload = function()
            {
                // 绘制原始图片
                ctx.drawImage(image, 30, 20);
                // 使用带高亮参数的方法绘制图片
                lightImage(image, 220, 20, 1.6);
            }
            var lightImage = function(image, x, y, light)
            {
                // 绘制图片
                ctx.drawImage(image, x, y);
                
                var imgData = ctx.getImageData(x, y, image.width, image.height);
                for (var i=0, len=imgData.data.length; i<len; i+=4)
                {
                    imgData.data[i+0] = imgData.data[i+0] * light;
                    imgData.data[i+1] = imgData.data[i+1] * light;
                    imgData.data[i+2] = imgData.data[i+2] * light;
                }
    
                ctx.putImageData(imgData, x, y);
            }
        </script>
    </body>
    
</html>

在这里插入图片描述

位图输出

<!DOCTYPE html>
<html>
    <head>
        <title>位图输出</title>
        <meta http-equiv="Content-Type" content="text/html;" />
        <meta charset="utf8"/>
    </head>
    <body>
        <canvas id="mc" width="360" height="280"
            style="border: 1px solid black;"></canvas>
    
        <img id="result" src="" alt="图片输出">
        <script type="text/javascript">
            var canvas = document.getElementById("mc");
            var ctx = canvas.getContext("2d");
            ctx.save();
            ctx.translate(30, 20);
            var image = new Image();
            image.src = "../../static/logo.png";
            image.onload = function()
            {
                // 创建位图填充
                imgPattern = ctx.createPattern(image, "repeat");
                // 设置使用位图填充作为填充颜色
                ctx.fillStyle = imgPattern;
                // 填充一个矩形
                ctx.fillRect(0, 0, 160, 80);
                // 恢复坐标系统
                ctx.restore();
                // 平移坐标系统
                ctx.translate(280, 160);
                ctx.beginPath();
                // 添加圆弧
                ctx.arc(0, 0, 80, 0, Math.PI*2, true);
                ctx.closePath();
                ctx.lineWidth = 12;
                // 设置使用位图填充作为边框颜色
                ctx.strokeStyle = imgPattern;
                ctx.stroke();
                // 使用img元素来显示Canvas的输出结果
                document.getElementById("result").src = canvas.toDataURL("image/png");
            }
        </script>
    </body>
</html>