-
非零环绕原则查看全部
-
非零环绕原则查看全部
-
The day查看全部
-
canvas是基于状态的绘图，而非基于对象，后面的属性会将上面属性覆盖；查看全部
-
|a c e| |b d f| |0 0 1| a、d水平、垂直缩放 b、c水平、垂直倾斜 e、f水平、垂直位移 设置变换矩阵 context.transform(a,b,c,d,e,f) context.setTransform(a,b,c,d,e,f) //忽略前面所有已经做的transform查看全部
-
1、阴影 2、global:globalAlpha,globalCompositeOperation。 3、clip：剪辑区域【按照灯】 4、非零环绕原则，镂空：路径的方向很重要。 5、isPointInPath：点击检测。查看全部
-
fillStyle = color/gradient/image/canvas/video 同理strokeStyle查看全部
-
线性、径向渐变超出画布不显示，未超出的部分则按两端边界颜色填充颜色查看全部
-
var grd=context.createRadialGradient(x0,y0,,r0,x1,y1,r1); grd.addColorStop(stop,color);//stop:0-1之间浮点数 context.fillStyle=grd;查看全部
-
lineJoin //线条连接时的样式 miter (默认) bevel (斜切) round （圆角）
cxt.lineJoin = "round"; 设置线条连接处为圆角
cxt.lineJoin = "miter";
cxt.line.miterLimit = 10; 当线条连接处为miter时才能设置，默认大小为10，用于控制连接处突出的尖尖角
查看全部 -
beginPath相当于全新的路径
moveTo 相当于从哪个坐标开始
lineTo 相当于拿笔从哪个点开始到哪个点结束
查看全部 -
translate的坐标变换时叠加的
变化完后要使用
context.translate(..., ... )把坐标变换回来
简便方法
context.save() 和 context.restore() 成对出现 实现坐标变换和还原
查看全部 -
操作相对应的参数
transform(a,b,c,d,e,f);
查看全部 -
笔记 - 1
查看全部 -
全部代码，不谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" ></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext('2d');
// createPattern(img, repeat-style);
// repeat-style: no-repeat/repeat-x/repeat-y/repeat
// var bgImg = new Image();
// bgImg.src = 'https://img1.sycdn.imooc.com//5333a1bc00014e8302000200-140-140.jpg';
// bgImg.onload = function () {
// var pattern = context.createPattern(bgImg, 'repeat');
// context.fillStyle = pattern;
// context.fillRect(0, 0, 800, 800);
// }
var bgCanvas = createBackgroundCanvas();
var pattern = context.createPattern(bgCanvas, 'repeat');
context.fillStyle = pattern;
context.fillRect(0, 0, 800, 800);
function createBackgroundCanvas() {
var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
var context = canvas.getContext('2d');
drawStar(context, 50, 50, 50, 0); // 之前的课程中写的的
return canvas;
}
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>
</html>
查看全部
举报