canvas 平移&缩放

1.平移
canvas其实只是一个包装器,真正起着重要作用的部分是2D渲染上下文,这才是我们真正绘制图形的地方。
然而2D渲染上下文是一种基于屏幕的标准绘制平台。它采用屏幕的笛卡尔坐标系统,以左上角(0,0)坐标为原点。
向右移动时x的坐标值增加,向下移动时y的坐标值增加。
好了了解了坐标系统之后,咱们就可以尽情的移动处理图形的位置了!
平移,也就是参照2D渲染上下文的原点(0,0),将图形从一个坐标点移动到另一个坐标点的过程!
使用方法:translate(x,y) 两个参数分别以原点为坐标
向左增加x个单位值,向下增加y个单位值。

1.平移
canvas其实只是一个包装器,真正起着重要作用的部分是2D渲染上下文,这才是我们真正绘制图形的地方。
然而2D渲染上下文是一种基于屏幕的标准绘制平台。它采用屏幕的笛卡尔坐标系统,以左上角(0,0)坐标为原点。
向右移动时x的坐标值增加,向下移动时y的坐标值增加。
好了了解了坐标系统之后,咱们就可以尽情的移动处理图形的位置了!
平移,也就是参照2D渲染上下文的原点(0,0),将图形从一个坐标点移动到另一个坐标点的过程!
使用方法:translate(x,y) 两个参数分别以原点为坐标
向左增加x个单位值,向下增加y个单位值。

canvas 基础知识整理(二),canvas基础知识整理

html部分:

<canvas id=”myCanvas” width=”800″ height=”800″ ></canvas>

第一部分、保存和恢复绘图状态
画布中,绘图状态指的是描述某一时刻2D渲染上下文外观的整套属性,从简单的颜色值到复杂变换矩阵及其它特性
注意:画布上的当前路径和当前位图(正在显示的内容)不属于状态
1.保存绘图状态:save();
2.恢复绘图状态:restore();

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");
        var text = "hello world!";
        context.font="30px serif"   // 把文本大小设置为30px

        context.fillStyle = "red";   // 设置文本颜色为红色
        context.fillText(text,40,40);   // 红色文本
        context.save();   // 保存画布状态( 把文字的红色状态保存 )

        context.fillStyle = "yellow";   // 设置文本颜色为黄色
       context.fillText(text,40,80);   // 黄色文本
        context.save();   // 保存画布状态( 把文字的黄色状态保存 )

        context.restore();   // 恢复画布状态
        context.fillText(text,40,120);   // 黄色文本

        context.restore();
        context.fillText(text,40,160);   // 红色文本
    }draw1('myCanvas'); 
</script>

 

图片 1

总结:
当调用save方法保存绘图状态时,2D渲染上下文会保存一个绘图状态栈,最近保存的状态在最顶部,调用restore方法第一个恢复的绘图状态是从栈的最顶部取出的;当栈返回最后一个状态后,会将它清除,使栈变成空的。

上例中最后一个被存入栈的是黄色,所以第一次调用restore方法时显示的文字是黄色,而不是红色;第二次调用restore方法时,才会显示红色文字。

第二部分 变形
注意:每一种变形方法,包括平移,都会影响方法执行后所绘制的所有元素,因为他们都是直接在2D渲染上下文操作的,而不是针对所绘制的图形。

  1. 平移 translate(x,y)
    x,y是坐标值
    移动的是2D渲染上下文的原点,而不是所绘制的对象,如下图:

图片 2

实例:

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");

        context.fillRect(10,10,50,50);
        context.translate(60,60);    // 原点坐标从(10,10)移动到(60,60)的位置

        context.fillStyle = "red";
        context.fillRect(10,10,50,50);    // 移动后,原点坐标由原来的(10,10)变成了(70,70)
    }draw1('myCanvas'); 
</script>

图片 3

  1. 缩放 scale(x,y)
    x,y是缩放的倍数,不是像素值。
    缩放是调整2D上下文的尺寸。

 

图片 4

上例中,将2D渲染上下文的x方向和y方向都乘以2,所以2D渲染上下文及其所绘制的所有对象都变成了2倍的尺寸
 3.旋转 rotate()
需要传入以弧度为单位的2D渲染上下文旋转角度值。 

实例:

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");

        context.rotate(0.7854);     // 把2D渲染上下文旋转45° (Math.PI/4)

        context.fillStyle = "red";
        context.fillRect(90,90,50,50);     // 旋转画布后 图形出现在了奇怪的区域上
    }draw1('myCanvas'); 
</script>

  图片 5

rotate()把2D渲染上下文绕其原点(0,0)进行旋转,图形本身不会旋转,如下图:

图片 6

如果只是想旋转所要绘制的图形,还需要配合着tranlate将2D渲染上下文的原点平移到正在绘制的图形中心,然后再对画布执行一次旋转,接着在当前位置绘制图形,
例如:

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");

        context.translate(400,400);   // 平移到正中心
        context.rotate(0.7854);   // 把2D渲染上下文旋转45° (Math.PI/4)
        context.fillStyle = "red";
        context.fillRect(90,90,50,50);   // 旋转画布后绘制一个图形
    }draw1('myCanvas'); 
</script>

图片 7

第三部分 合成
将多个可视化元素合成一个可视化元素

  1. 全局阿尔法值 globalAlpha
    值:0.0(全透明)~1.0(不透明)之间
    默认:1.0
    影响将要绘制的对象的透明度

图片 8

  1. 合成操作 globalCompositionPeration
    源 :绘制的新图形
    目标:已经绘制了图形的2D渲染上下文
    1) source-over (默认属性)源在目标之上
    2) destination-over 源在目标之下
    3) source-atop
    源在目标之上,但是重叠区域两者都不透明,绘制在其他位置的目标不透明,源透明(不可见)
    4) destination-atop
    源在目标之下,但是重叠区域两者都不透明,绘制在其他位置的源不透明,目标透明(不可见)
    5) source-in 源与目标重叠的部分只绘制源,不重叠的部分都变成透明
    6) destination-in 源与目标重叠的部分只绘目标,不重叠的部分都变成透明
    7) source-out 与目标不重叠的区域绘制源,其他部分变成透明
    8) destination-out 与目标不重叠的区域绘制目标,其他部分变成透明
    9) lighter
    与顺序无关,如果源与目标重叠,就将两者颜色值相加,得到颜色值的最大值为255,结果就是白色
    10)copy 与顺序无关,只绘制源,覆盖掉目标
    11)xor 与顺序无关,只绘制不重叠区域,重叠区域透明

 

图片 9

第四部分 阴影
shadowBlur 模糊值
shadowOffsetX x轴方向阴影偏移
shadowOffsetY y轴方向阴影偏移
shadowColor 模糊颜色

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");

        context.shadowBlur=20;   // 20px 模糊值
        context.shadowColor="red";   // 模糊颜色
        context.shadowOffsetX = 10; 
        context.shadowOffsetY = 10; 
        context.fillRect(20,20,150,150);
    }draw1('myCanvas'); 
</script>

图片 10  

第五部分 渐变

  1. 线性渐变 createLinearGradient(x0,y0,x1,y1)
    参数 :渐变起点x,y坐标
    渐变终点x,y坐标
  2. 放射渐变 createRadialGradient(x0,y0,r0,x1,y1,r1)
    参数:前三个描述开始圆
    后三个描述结束圆
    每一个圆的(x,y)表示圆心坐标,r表示半径
    实现渐变效果是连接两个圆周的椎体,开始圆之前的部分显示偏移量为0的颜色,结束圆之后的部分显示偏移量为1的颜色值
    注:为了实现最佳效果,开始圆和结束圆放在同一个位置
    返回:CanvasGradient对象
    加颜色:addColorStop()
    参数:颜色偏移值(0:渐变起点;1:渐变终点)
    偏移量颜色值
    fillStyle和storeStyle都可以接受CanvasGradient对象表示的渐变颜色值
    实例一:线性渐变

 

图片 11

实例二:放射渐变

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");

        var gradient = context.createRadialGradient(500,500,100,500,500,500);     // 为了实现最佳效果,开始圆和结束圆放在同一个位置
        gradient.addColorStop(0,'blue');
        gradient.addColorStop(1,'yellow');
        context.fillStyle = gradient;
        context.fillRect(0,0,800,800);
    }draw1('myCanvas'); 
</script>

  图片 12

第六部分 复杂路径
如何将多个路径链接在一起?
不断的调用lineTo();
moveTo 会创建一条全新的子路径
lineTo 只是沿着一条已经有的子路径继续画线

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");

        context.beginPath();
        context.moveTo(100,50);
        context.lineTo(30,150);
        context.lineTo(160,150);
        context.closePath();
        context.stroke();
        context.fill();
    }draw1('myCanvas'); 
</script>

  图片 13

2、贝塞尔曲线
quadraticCurveTo()
参数:
控制点的(x,y)坐标
路径目标点的(x,y)坐标
二次贝塞尔曲线,只有一个控制点(线条中只有一次弯曲)
bezierCurveTo()
参数:
第一个控制点(x,y)的坐标
第二个控制点(x,y)的坐标
路径目标点(x,y)的坐标
三次贝塞尔曲线,两个控制点(两次弯曲)
 实例:二次

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");
        context.lineWidth=5;
        context.beginPath();
        context.moveTo(50,250);
        context.quadraticCurveTo(250,100,450,250);
        context.stroke();
    }draw1('myCanvas'); 
</script> 

  图片 14

实例:三次

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");
        context.lineWidth=5;
        context.beginPath();
        context.moveTo(50,250);
        context.bezierCurveTo(150,50,350,450,450,250);
        context.stroke();
    }draw1('myCanvas'); 
</script>

  图片 15

以上是学习时候做的笔记,如果哪里有问题,欢迎指正,不甚感激!

参考资料  < HTML5  CANVAS基础教程 >      

 

基础知识整理(二),canvas基础知识整理
html部分: canvas id=”myCanvas” width=”800″ height=”800″ /canvas
第一部分、保存和恢复绘图状态 画布中…

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>变形</title>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            context.fillRect(150, 150, 100, 100);
            context.translate(150, 150);  //设置平移  
            context.fillStyle = "rgb(255,0,0)";
            context.fillRect(150, 150, 100, 100);   //执行位移后,将原点坐标(150,150)分别加上150,即以坐标(300,300)为原点坐标绘制宽高为100单位的矩形。

            context.fillStyle = "rgb(0,255,255)";
            context.translate(150, 150);   //两次位移 相当于位移了300  还是以(300,300)为坐标进行绘制
            context.fillRect(0, 0, 100, 100);
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="1000" height="1000">
        您的浏览器暂不支持画布!
    </canvas>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>变形</title>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            context.fillRect(150, 150, 100, 100);
            context.translate(150, 150);  //设置平移  
            context.fillStyle = "rgb(255,0,0)";
            context.fillRect(150, 150, 100, 100);   //执行位移后,将原点坐标(150,150)分别加上150,即以坐标(300,300)为原点坐标绘制宽高为100单位的矩形。

            context.fillStyle = "rgb(0,255,255)";
            context.translate(150, 150);   //两次位移 相当于位移了300  还是以(300,300)为坐标进行绘制
            context.fillRect(0, 0, 100, 100);
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="1000" height="1000">
        您的浏览器暂不支持画布!
    </canvas>
</body>
</html>

由此不难看出,canvas的绘图状态一旦设置,就会影响之后所有元素的绘制属性!
这是由于它们都是在2D渲染上下文中操作的,而不是只针对所绘制的图形。

由此不难看出,canvas的绘图状态一旦设置,就会影响之后所有元素的绘制属性!
这是由于它们都是在2D渲染上下文中操作的,而不是只针对所绘制的图形。

发表评论

电子邮件地址不会被公开。 必填项已用*标注