-
- 慕姐8207076 2020-01-17
scale()放大线条宽度，也改变位置。有副作用。
-
截图0赞 · 0采集
-
- pinzaghi 2019-12-04
scale会缩放许多属性，例如坐标、线条宽度
-
截图0赞 · 0采集
-
- 慕码人8705899 2019-01-19
图形变换三大方法
-
截图0赞 · 0采集
-
- 慕码人8705899 2019-01-19
改造函数 将绘制路径单独抽出来作为一个函数
然后使用图形变换的方法translate() rotate(需要角度转弧度)等方法
改变路径的位置和形状
再绘制颜色边框等属性
-
截图0赞 · 0采集
-
- lemons3205542 2018-10-19
biji - 1
-
截图0赞 · 0采集
-
- 23568 2018-10-11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" ></canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;
var context = canvas.getContext('2d');
context.fillStyle = 'black';
context.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < 200; i++) {
var r = Math.random() * 10 + 10;
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var a = Math.random() * 360;
drawStar(context, x, y, r, a);
}
}
function drawStar(ctx, x, y, R, rot) {
ctx.save();
ctx.translate(x, y);
ctx.rotate(rot/180*Math.PI);
ctx.scale(R, R);
starPath(ctx);
ctx.fillStyle = '#fb3';
ctx.fill();
ctx.restore();
}
function starPath(ctx) {
ctx.beginPath();
for (var i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((18+i*72)/180*Math.PI),
-Math.sin((18+i*72)/180*Math.PI));
ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
-Math.sin((54+i*72)/180*Math.PI)*0.5);
}
ctx.closePath();
}
</script>
</body>
</html>
- 1赞 · 1采集
-
- 左小珍 2018-01-23
- Canvas绘图详解 4-3 应用translate rotate和scale 图形变换会使坐标系发生变化 ctx.translate(x,y) ctx.rotate(deg) ctx.scale(sx,sy)
-
截图1赞 · 1采集
-
- qq_简单点_14 2017-09-14
- 图形变换 位移translate(x,y) 旋转 rotate(deg) 缩放 scale(sx,sy)
- 0赞 · 0采集
-
- 雨落乄萧何 2017-07-19
- 图形变换 位移translate(x,y) 旋转 rotate(deg) 缩放 scale(sx,sy)
-
截图0赞 · 0采集
-
- xxcupid 2017-04-15
- 可以把线宽先除以scale的数值，这样就和scale变换抵消掉了，这样的线宽就和使用scale之前一样了
- 0赞 · 0采集
-
- 梦林苑3290767 2016-11-08
- 改进代码2
-
截图0赞 · 0采集
-
- 无所畏惧小小小 2016-10-29
- scale缩放会对左上角坐标（原点坐标）、线条宽度、和图形一起进行缩放 save，restore 对其产生的作用有限
- 0赞 · 0采集
-
- 苏菲刀客 2016-07-05
- 图形变换 位移translate(x,y) 旋转 rotate(deg)//里面是弧度值 缩放 scale(sx,sy) 缩放出现的问题 1.如果有lineWith，宽度也会缩放 2.如果起始点不是0 0，起始点也会缩放 使用save和restore恢复translate造成的原点重叠
- 0赞 · 3采集
-
- 思思_0003 2016-03-23
- 图形变换
-
截图0赞 · 0采集
-
- 慕妹2970887 2016-03-13
- 图形变换 位移translate(x,y) 旋转 rotate(deg)//里面是弧度值 缩放 scale(sx,sy) 缩放出现的问题 1.如果有lineWith，宽度也会缩放 2.如果起始点不是0 0，起始点也会缩放
- 0赞 · 2采集
-
- Bestcode 2016-03-04
- scale有副作用，不仅会缩放宽高，边框大小，与原点的距离都会被缩放（如，原始距离为50,50,2倍变换后变成100,100）！ 所以，x，y设为0,0来避免（因为0*任何数都为0），而边框只能不设置！
-
截图0赞 · 2采集
-
- 慕仙0369855 2016-02-23
- 图形变换 位移translate(x,y) 旋转 rotate(deg) 缩放 scale(sx,sy) 缩放出现的问题 1.如果有lineWith，宽度也会缩放 2.如果起始点不是0 0，起始点也会缩放
- 0赞 · 0采集
-
- 多瑞秘法搜啦系多 2016-01-05
- 图形变换函数（） 存在副作用！！
-
截图0赞 · 0采集
-
- 多瑞秘法搜啦系多 2016-01-05
- scale( sx, sy )操作具有副作用，表现为不仅对图像的大小进行缩放操作，还对图像的其他数值属性（比如边框的宽度，左上角的坐标等等）进行相应的缩放操作。
-
截图0赞 · 0采集
-
- lixiaofangw 2015-11-20
- rotate（）里面的参数应该是弧度，而不应该是角度
- 0赞 · 1采集
-
- TAMJING 2015-08-25
- scale( sx, sy )操作具有副作用，表现为不仅对图像的大小进行缩放操作，还对图像的其他数值属性（比如边框的宽度，左上角的坐标等等）进行相应的缩放操作。
-
截图0赞 · 5采集
-
- 一只熊猫 2015-08-23
- translate( x , y ) rotate( deg ) scale( sx , sy )
-
截图0赞 · 0采集
-
- 墨西哥鸡味卷 2015-08-10
- scale( sx, sy )操作具有副作用，表现为不仅对图像的大小进行缩放操作，还对图像的其他数值属性（比如边框的宽度，左上角的坐标等等）进行相应的缩放操作。
- 1赞 · 0采集
-
- VirgoYellow 2015-08-09
- scale( sx, sy )操作具有副作用，表现为不仅对图像的大小进行缩放操作，还对图像的其他数值属性（比如边框的宽度，左上角的坐标等等）进行相应的缩放操作。
- 0赞 · 0采集
-
- 托儿所肄业生 2015-05-20
- scale绘制有副作用，他会把其他属性也一起变换的，有点特殊
- 0赞 · 1采集
-
- 离尘不理人 2015-05-19
- scale会有副作用，会将图形的其他属性都进行缩放
-
截图2赞 · 0采集
-
- 非儿 2015-04-12
- Necel cxt.save();//保存 cxt.translate(x，y);//控制原点，原点会多次重叠且每次重叠以新重叠的原点为起点 cxt.rotate(度数/180*Math.PI);//控制图形旋转角度 五角星的路径函数； cxt.storke(); cxt.restore();//重置原点，使重叠原点全部失效
- 0赞 · 0采集
-
- Necel 2015-02-26
- cxt.save();//保存 cxt.translate(x，y);//控制原点，原点会多次重叠且每次重叠以新重叠的原点为起点 cxt.rotate(度数/180*Math.PI);//控制图形旋转角度 五角星的路径函数； cxt.storke(); cxt.restore();//重置原点，使重叠原点全部失效
-
截图0赞 · 0采集
-
- 吃大灰狼的小红帽 2014-12-29
- scale绘制有副作用，他会把其他属性也一起变换的，有点特殊
- 0赞 · 0采集
-
- 吃大灰狼的小红帽 2014-12-29
- 保存、恢复的操作，平移，旋转（弧度，需要转换）。
- 0赞 · 0采集
