Canvas4——图形绘制处理

来源：互联网发布：网络主播年收入排行榜编辑：程序博客网时间：2024/06/05 06:16

1、图形组合

`globalCompositeOperation = type 属性`

**CanvasRenderingContext2D**.globalCompositeOperation属性是 Canvas 2D API 用来绘制新的图形时，设置图形间组合操作的。每种类型都是一种表示组合或合成方式的字符串。

查看type的各种类型：

（1）在 Canvas Tutorial 中查看 Compositing 章节。

（2）type介绍——查看下面页面的内容：英文原文；中文翻译。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas5</title>
    <script>
        function draw(id){
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            var oprtns = new Array(
                "source-atop",
                "source-in",
                "source-out",
                "source-over",
                "destination-atop",
                "destination-in",
                "destination-out",
                "destination-over",
                "lighter",
                "copy",
                "xor"
            )
            i = 10;
            context.fillStyle = "blue";
            context.fillRect(10,10,60,60);
            context.globalCompositeOperation = oprtns[i];
            context.fillStyle = "red";
            context.arc(60,60,30,Math.PI*2,false);
            context.fill();
        }
    </script>
</head>
<body onload="draw('canvas')">
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

2、图形绘制阴影

绘制阴影有四个参数，分别是：shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY.

（1）**CanvasRenderingContext2D**.shadowBlur 是 Canvas 2D API 描述模糊效果程度的属性；它既不对应像素值也不受当前转换矩阵的影响。默认值是 0。

语法

ctx.shadowBlur = level;

level: 描述模糊效果程度的，float 类型的值。默认值是 0。负数、 Infinity或者 NaN 都会被忽略。

（2）**CanvasRenderingContext2D**.shadowColor 是 Canvas 2D API 描述阴影颜色的属性。

（3）**CanvasRenderingContext2D**.shadowOffsetX 是 Canvas 2D API 描述阴影水平偏移距离的属性。

（4）**CanvasRenderingContext2D**.shadowOffsetY 是 Canvas 2D API 描述阴影垂直偏移距离的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas7</title>
    <script>
 
        function draw(id){
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            context.fillStyle = "#eeeeef";
            context.fillRect(0,0,500,500);
            context.shadowOffsetX = 10;
            context.shadowOffsetY = 10;
            context.shadowColor = "rgba(100,100,100,0.5)";
            context.shadowBlur = 3.5;
 
            context.translate(0,50);
            for(var i=0;i<3;i++){
                context.translate(100,100);
                create5Star(context);
                context.fill();
            }
        }
 
        function create5Star(context){
            var dx = 100;
            var dy = 0;
            var s = 50;
            context.beginPath();
            context.fillStyle = "rgba(255,0,0,0.5)";
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI/5*4;
            for(var i = 0;i<5;i++){
                var x = Math.sin(i*dig);
                var y = Math.cos(i*dig);
                context.lineTo(dx+x*s,dy+y*s);
            }
            context.closePath();
        }
    </script>
</head>
<body onload="draw('canvas')">
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

效果图如下：

3、绘制图像

**CanvasRenderingContext2D**.drawImage() 是 Canvas 2D API 提供默认的方式在 canvas 上绘制图片的方法。
void ctx.drawImage(image,dx,dy,dWidth,dHeight);
dx：绘制图像的起始点x；dy：绘制图像的起始点y
dWidth：绘制图像的宽度；dHeight：绘制图像的高度

void ctx.drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);

#参数：

（1）image:规定要使用的图像、画布或视频
（2）sx：开始剪切的x坐标位置
（3）sy：开始剪切的y坐标位置
（4）swidth：被剪切图像的宽度
（5）sheight：被剪切图像的高度
（6）dx:在画布上放置图像的x坐标位置
（7）dy:在画布上放置图像的坐标位置
（8）dwidth：要使用图像的宽度
（9）dheight：要使用图像的高度

0 0