-
结束闭合，完成闭环，在开始绘制图形开头和结尾加下列代码
context.beginPath();
context.closePath();
查看全部 -
推导图查看全部 -
绘制多边形的时候 要用beginpath和closepath包起来
查看全部 -
这是我的一个混合式布局笔记，关于绘图之旅的
哈哈
查看全部 -
结合前几节的教程，模拟了一个定时滚动的齿轮，分享一下，共同进步。
window.onload = function() {
var canvas = document.getElementById("start-canvas");
canvas.width = 800;
canvas.height = 800;
var ctx = canvas.getContext('2d');
let a = 0
var timer = setInterval(function() {
a++;
if (a <= 20) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
mutiStart(ctx, 400, 400, 300, 150, 18, 5, 18 * a)
} else {
a = 0;
clearInterval(timer);
}
}, 1000)
}
/**
* @param {Object} ctx
* @param {Object} x Star的X轴偏移量
* @param {Object} y Star的y轴偏移量
* @param {Object} R 外圆半径
* @param {Object} r 内圆半径
* @param {Object} rot Star旋转度数（顺时针）
* @param {Object} multi 几边形
* @param {Object} angel Star旋转度数（逆时针）
*/
function mutiStart(ctx, x, y, R, r, rot, multi, angel) {
ctx.beginPath();
ctx.fillStyle = "#F1FA0C";
ctx.strokeStyle = "#F1FA0C";
for (var i = 0; i < multi; i++) {
ctx.lineTo(Math.cos((angel + (360 / multi) * i - rot) / 180 * Math.PI) * R + x,
y - Math.sin((angel + (360 / multi) * i - rot) / 180 * Math.PI) * R
)
ctx.lineTo(Math.cos((angel + 360 / (multi * 2) + (360 / multi) * i - rot) / 180 * Math.PI) * r + x,
y - Math.sin((angel + 360 / (multi * 2) + (360 / multi) * i - rot) / 180 * Math.PI) * r
)
}
ctx.closePath();
ctx.fill();
ctx.stroke();
}
查看全部 -
if (balls[i].x - balls[i].radius<=0) {
balls[i].vx = -balls[i].vx;
balls[i].x = balls[i].radius;
}
if (balls[i].x + balls[i].radius >= canvasWidth) {
balls[i].vx = -alls[i].vx;
balls[i].x = canvasWidth-balls[i].radius;
}
if (balls[i].y - balls[i].radius <= 0) {
balls[i].vy = -balls[i].vy;
balls[i].y = balls[i].radius;
}
if (balls[i].y + alls[i].radius >= canvasHeight) {
balls[i].vy = -s[i].vy;
balls[i].y = canvasHeight-balls[i].radius;
}
这是update函数部分
查看全部 -
这是利用背景填充，原理跟ps里面剪贴蒙版效果一致查看全部 -
保存canvas状态
查看全部 -
第三課的例子地址
查看全部 -
第三方Canvas圖形庫
查看全部 -
兼容性代碼示例
查看全部 -
老IE兼容問題
查看全部 -
查看全部
-
探照灯、聚光灯效果
查看全部 -
剪纸效果：
查看全部 -
圆环效果：注意画圆方向
查看全部 -
非零环绕原则
查看全部 -
clip绘制区域代码
查看全部 -
示例效果：
查看全部 -
globalCompositeOperation:图形重叠效果
查看全部 -
阴影代码示例：shadowBlur：模糊程度
查看全部 -
阴影…………：
查看全部 -
小结：文本的度量
查看全部 -
小结：文本对齐
查看全部 -
小结：font
查看全部 -
小结：文字渲染基础
查看全部 -
运行效果：
查看全部 -
代码示例：
查看全部 -
代码示例：
查看全部
举报