-
<!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(); 成对出现，中间绘图状态不会对后面造成影响。
查看全部 -
关注查看全部
-
context.font = "bold 40px Arial"(粗框,40px大小,字体)
context.fillStyle="#058"颜色
context.fillText(string,x,y,[maxlen](文字的最长宽度))
context.strokeText(string,x,y,[maxlen])(只有外边框的文字)
查看全部 -
context.textBaseLine = top/middle/bottom/alphabetic(default)/ideographic/hanging 是根据context.fillText(string,x,y)中的y值进行上对齐、下对齐或居中的。后面三个分别表示拉丁文的垂直方向基准线、日语中文等方块字的垂直方向基准线、印度文的垂直方向基准线。 context.textAlign = left/middle/right 是根据context.fillText(string,x,y)中的x值进行左对齐、右对齐或居中的。查看全部
-
lineCap：设置线条两段的形状
butt(default)
round
square
lineCap:只能用于线段的开始处和结尾处，不能用于连接处。
查看全部 -
处理线条间的连接处用lineJoin，一共有三个值：miter（默认，尖角）、bevel（斜接）、round（圆角）
materLimit用来限制内角与外角间最大的距离（默认是10），一旦超过这个距离就会使用bevel的衔接方式
只有在非常需要表现非常尖锐的角时，才会使用到materLimit
查看全部 -
lineCap设置线条的帽子：butt（默认）、round、square。后两者绘制出的线条都要长一些（戴上了帽子）。lineCap适用于线条的起始处和结尾处不适用于连接处。
通常绘制一个封闭的多边形用beginPath()和closePath()（推荐），但也可以不用closePath()而用lineCap = “square”来实现
查看全部 -
五个顶点坐标计算 函数查看全部
-
没有专门绘制阴影的函数，在设置了关于阴影的状态量之后阴影就会自动出现。
四个状态量：
context.shadowColor、context.shadowOffsetX、context.shadowOffsetY、context.shadowBlur
查看全部 -
度量文本的用context.measureText(String).width，需要提前确定font状态，目前只能获得宽度不能获得高
查看全部 -
文本水平方向对齐 设置状态context.textAlign(left center right)，以fillText或strokeText的X值为参考
文本垂直方向对齐 设置状态context.textBaseline(top middle bottom ideographic hanging alphabetic)
查看全部 -
x0,y0是arcTo()的绘制起点，但不一定是切点当半径过大时，切点在延长线上
查看全部 -
获取canvas标签
getElementById得到canvas标签
获取canvas上下文绘图环境
查看全部 -
canvas 绘制贝塞尔曲线！
查看全部
举报