canvas scale()画布缩放的使用

前两天把canvas的translate()和rotate()的方法都介绍了下，今天就来说说scale()

scale() 方法缩放当前绘图，更大或更小。
注释：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。
scale(x,y)
参数：x：X表示横轴方向上缩放倍数
y：Y表示纵轴方向上缩放的倍数

例1：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>canvas{border: 1px solid #000;}</style>
</head>
<body>
<canvas width="800" height="600"></canvas>
<script>var canvas=document.querySelector('canvas');var ctx=canvas.getContext('2d');//初始圆ctx.arc(400,300,150,0,2*Math.PI);ctx.stroke();ctx.beginPath();ctx.scale(1,0.5);//横坐标不变，纵坐标缩放一半，即改变以后圆心的位置（400,150）//横向的半径不变，纵向的半径缩小一半，即变为了椭圆ctx.strokeStyle='red';ctx.arc(400,300,150,0,2*Math.PI);ctx.stroke();
</script>
</body>
</html>

显示效果：

例2：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>canvas{border: 1px solid #000;}</style>
</head>
<body>
<canvas width="800" height="600"></canvas>
<script>var canvas=document.querySelector('canvas');var ctx=canvas.getContext('2d');//初始圆ctx.arc(400,300,150,0,2*Math.PI);ctx.stroke();ctx.beginPath();ctx.scale(0.5,1);//纵坐标不变，横坐标缩放一半，即改变以后圆心的位置（200,300）//纵向的半径不变，横向的半径缩小一半，即变为了椭圆ctx.strokeStyle='red';ctx.arc(400,300,150,0,2*Math.PI);ctx.stroke();
</script>
</body>
</html>

显示效果：

例3：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>canvas{border: 1px solid #000;}</style>
</head>
<body>
<canvas width="800" height="600"></canvas>
<script>var canvas=document.querySelector('canvas');var ctx=canvas.getContext('2d');//初始圆ctx.arc(200,200,50,0,2*Math.PI);ctx.stroke();ctx.beginPath();ctx.scale(2,2);//横纵坐标都放大了2倍//半径也放大了2倍ctx.strokeStyle='red';ctx.arc(200,200,50,0,2*Math.PI);ctx.stroke();
</script>
</body>
</html>

显示效果：

canvas scale()画布缩放的使用相关推荐

04 canvas——位移画布和旋转缩放
4.1 缩放 scale() 方法缩放当前绘图,更大或更小语法:context.scale(scalewidth,scaleheight) scalewidth : 缩放当前绘图的宽度 (1=100 ...
android画布旋转,Android Canvas 平移、缩放、旋转的理解
自己用了很久对这个几个方法,用了好多次了,但对它们的原理概念都还是没仔细理解清楚,真是太菜了. View和canvas并不是同一个东西,可以这样想象,我们的View是固定的,相当于与一个画框,画框范围 ...
Android Canvas.scale缩放
Android30 Canvas.scale方法 1)方法1 将x轴.y轴进行缩放 public void scale(float sx, float sy) {if (sx == 1.0f & ...
android画布设置最外层,Android自定义View高级(三)-Canvas之画布操作
一.Canvas简介 Canvas我们可以称之为画布,能够在上面绘制各种东西,是Android平台2D图形绘制的基础. 二.Canvas的常用操作操作类型相关API 备注绘制颜色 drawCol ...
android画布缩放移动demo,Android：画布无法缩放
我有一个自定义视图,它在onDraw()的画布上绘制了一些位图.图纸正在工作.看一下代码片段: @Override protected void onDraw(Canvas canvas) { // ...
Android Canvas 平移、缩放、旋转的理解
自己对这个几个方法,用了好多次了,但对它们的原理概念都还是没仔细理解清楚,真是太菜了. View和canvas并不是同一个东西,可以这样想象,我们的View是固定的,相当于与一个画板或者画框,画板范围 ...
【canvas 图形画布标签】(使用详解)
canvas 图形画布标签 1. 如何定义一个图形画布 ? 1.1 canvas 图形画布标签的属性有哪些 ? 1.2 canvas 图形画布的基本用法有哪些 ? 1.3 如何使用 canv ...
Canvas之画布操作
转载自:Gcsloop Github 一.Canvas的常用操作速查表操作类型相关API 备注绘制颜色 drawColor, drawRGB, drawARGB 使用单一颜色填充整个画布绘制基 ...
手绘板的制作——画布缩放(4)
前言在这一篇中,我们讲解下画布的缩放,也就是做一个根据手势缩放进行画布缩放的功能. 我们先来梳理下逻辑: 监听手势,当为一根手指的时候,就延续之前的操作,执行手绘操作,当操作为两根手指的时候,则执行 ...

canvas scale()画布缩放的使用

canvas scale()画布缩放的使用相关推荐

最新文章

热门文章