-
全部代码，不谢
<!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>
查看全部 -
<!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>
查看全部 -
图形变换： 位移、大小、缩放。
context.translate(x, y); 默认多个translate会叠加。
save(); restore(); 成对出现，中间绘图状态不会对后面造成影响。
查看全部 -
绘制矩形api：
ctx.beginPath(); ctx.rect(x, y, width, height); ctx.closePath(); ctx.stroke(); ctx.fillRect(x, y, width, height); ctx.strokeRect(x, y, width, height);
fillStyle 和 strokeStyle 支持所有CSS支持的颜色表示。
查看全部 -
封闭多边形的首尾交点会有缺口，使用 context.closePath() 能解决这个问题。
绘制封闭多边形最好成对使用 beginPath(); 和 closePath();
先绘制线条再填充颜色，边框的一半会被填充色覆盖。所以先绘制填充色再描边。
查看全部 -
context.font = "bold 40px Arial"(粗框,40px大小,字体)
context.fillStyle="#058"颜色
context.fillText(string,x,y,[maxlen](文字的最长宽度))
context.strokeText(string,x,y,[maxlen])(只有外边框的文字)
查看全部 -
context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false)
context.arcTo(x1,y1,x2,y2,radius)
context.quadraticCurveTo(x1,y1,x2,y2)
context.bezeirCurveTo(x1,y1,x2,y2,x3,y3);
查看全部 -
画star，按照三角函数来算
查看全部 -
lineCap：设置线条两段的形状
butt(default)
round
square
lineCap:只能用于线段的开始处和结尾处，不能用于连接处。
查看全部 -
translate()用于改变坐标原点的位置，每次调用这个接口时，应该还原回去（状态叠加）。
save()和restore()成对出现，可以保存当前绘图状态并还原成绘图之前的状态，节省了很多麻烦
查看全部 -
处理线条间的连接处用lineJoin，一共有三个值：miter（默认，尖角）、bevel（斜接）、round（圆角）
materLimit用来限制内角与外角间最大的距离（默认是10），一旦超过这个距离就会使用bevel的衔接方式
只有在非常需要表现非常尖锐的角时，才会使用到materLimit
查看全部 -
lineCap设置线条的帽子：butt（默认）、round、square。后两者绘制出的线条都要长一些（戴上了帽子）。lineCap适用于线条的起始处和结尾处不适用于连接处。
通常绘制一个封闭的多边形用beginPath()和closePath()（推荐），但也可以不用closePath()而用lineCap = “square”来实现
查看全部 -
五角星的凹点在内圆上，凸点在外圆上。
canvas画布的坐标系相较于笛卡尔坐标系X轴正指向不变，Y轴正方向向下
查看全部 -
常常beginPath()和closePath()成对儿地出现用来绘制一个封闭的多边形，这是标准做法。
closePath()会自动把最后一个点与第一个点连接在一起
当需要绘制一个要描边儿的图形时，应该先填充颜色，再描边儿
canvas是基于状态的绘制，因此推荐把路径写在一起，把状态写在一起，再把绘制写在一起
查看全部 -
beginPath()开启一个全新的状态，beginPath() + lineTo() 相当于moveTo()
查看全部
举报