Html5 Canvas学习之路（三）

DrizzleX 发布于2019-08-05 13:35 / 3020人阅读

摘要：三的绘图下在画布上的合成合成是指如何精细控制画布上对象的透明度和分层效果。有两个属性可以控制合成操作属性用来表示透明度，它的默认值为完全不透明，并且可以设置从到的值，这项属性必须在图形绘制之前设置。代码示例显示结果

三：Canvas的绘图（下）

1. 在画布上的合成

合成是指如何精细控制画布上对象的透明度和分层效果。有两个属性可以控制合成操作：

globalAlpha

globalAlpha Canvas属性用来表示透明度，它的默认值为1.0（完全不透明），并且可以设置从0.0到1.0的值，这项Canvas属性必须在图形绘制之前设置。

globalCompositeOperation

globalCompositeOperation属性用来显示分层效果，它的值在globalAlpha以及所有变换都生效后控制在当前canvas位图中绘制图形，其值如下：

代码示例如下：

    function compound() {
        context.globalAlpha = .8;
        context.fillStyle = "#000000";
        context.fillRect(200,0,200,200);
        context.fillStyle = "#c70711";
        context.globalAlpha = .9;
        context.globalCompositeOperation = "source-over";
        context.fillRect(180,0,50,50);
        context.fillStyle = "#650ec7";
        context.globalAlpha = .9;
        context.globalCompositeOperation = "destination-over";
        context.fillRect(370,0,50,50);
    }

显示效果如下：

2. 在画布上的变换

画布变换是指用数学方法调整所绘图形的物理属性。旋转和缩放就是常用的两种变换。

1) 旋转和平移变换

先来看一个概念，变换矩阵。
画布上的每个对象都拥有一个当前的变换矩阵。transform() 方法替换当前的变换矩阵，它允许您缩放、旋转、移动并倾斜当前的环境。。它以下面描述的矩阵来操作当前的变换矩阵：

a  c  e
b  d  f
0  0  1

参数值如下：

代码如下：

    function rotaterect() {
        context.globalAlpha = .6;
        context.transform(1,0.5,-0.5,1,30,10);
        context.fillStyle = "#c70711";
        context.fillRect(180,0,50,50);
    }

效果如下：

2) 缩放变换

可用scale函数进行缩放变换。
scale()函数有两个参数，第一个是x轴的缩放属性，第二个是y轴的缩放属性，正常对象缩放大小的数值都为1。

代码示例：

    function scalerect() {
        context.globalAlpha = .6;
        context.scale(2,2);
        context.fillStyle = "#c70711";
        context.fillRect(80,0,50,50);
    }

显示结果：

专线服务私有云 HTML5 Canvas html5的canvas html5Canvas 机器学习学习之路

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/57450.html

Html5 Canvas 学习之路（一）

摘要：一先来一个概述是屏幕上的一个由控制的即时模式位图区域，通过调用，在每一帧完全重绘屏幕上的位图。有这三个属性代码，放在外部文件中，代码如下添加一个事件监听器，在浏览器加载完页面后调用函数。调用函数获得上下文背景文字图像显示结果一：先来一个Hello World 1. 概述 Html5 Canvas 是屏幕上的一个由JavaScript控制的即时模式位图区域，通过JavaScript调...

187J3X1 2019-08-22 16:23 评论0 收藏0
Html5 Canvas学习之路（四）

摘要：在中，对其字体有两个选项，及垂直和水平。线性渐变可以调用上下文方法来创建渐变参考线。和是参考线的起点，和是参考线的终点坐标。代表格式有效的颜色。径向渐变径向渐变与线性渐变类似，只不过它是一个圆锥形，而不是一条直线。 Html5 Canvas 的文本API 1. 显示基本文本要在画布上显示文本，最简单的定义方式是通过使用CSS字体样式属性的标准值设置context.font的样式:f...

rockswang 2019-08-05 13:38 评论0 收藏0
Html5 Canvas学习之路（五）

摘要：还可以裁切拼贴图像数据，以显示用户需要的部分。代码在调用图像之前，必须确认其已正确加载并且准备就绪。为此可以建立一个事件监听器，当图像的事件触发时立即启动。一旦图片加载完成，有多种方法可以将其显示在屏幕上。 Canvas 图像（上） Canvas 图像API可以加载图像数据，然后直接将图像应用到画布上。还可以裁切、拼贴图像数据，以显示用户需要的部分。此外，Canvas还提供了像素数据...

lemon 2019-08-05 13:41 评论0 收藏0
Html5 Canvas 学习之路（二）

摘要：在位置处以宽为高为，清楚指定区域并使其完全透明。调用函数开始一个路径，调用函数结束一个路径。端点是在选段边缘处以线宽为长以一半线宽为宽的矩形。二：Canvas的绘图（上） 1. 概述 Canvas具有强大的绘图功能，可以通过Javascript控制其上下文对象进行绘图。 2. 基本矩形在Canvas上，绘制基本矩形有三种方式：填充、描边、清楚。三种API如下： fillRect(...

sorra 2019-08-22 16:25 评论0 收藏0
Html5 Canvas 学习之路（二）

摘要：在位置处以宽为高为，清楚指定区域并使其完全透明。调用函数开始一个路径，调用函数结束一个路径。端点是在选段边缘处以线宽为长以一半线宽为宽的矩形。二：Canvas的绘图（上） 1. 概述 Canvas具有强大的绘图功能，可以通过Javascript控制其上下文对象进行绘图。 2. 基本矩形在Canvas上，绘制基本矩形有三种方式：填充、描边、清楚。三种API如下： fillRect(...

jsummer 2019-08-05 13:36 评论0 收藏0