// 代码开始
// canvas代码
// 请定义canvas相关的全局变量
var canvas, ctx, centerX, centerY, radius = 0;
【canon代码5b00】// 初始化canvas
function initCanvas() {
// 获取Canvas的DOM结点
canvas = document.getElementById(“canvas”);
// 判断当前的浏览器是否支持Canvas
if (!canvas.getContext) {
alert(“当前浏览器不支持canvas”);
return;
}
// 获取绘图上下文
ctx = canvas.getContext(“2d”);
// 中心点位置
centerX = canvas.width / 2;
centerY = canvas.height / 2;
}
// 绘制圆
function drawCircle() {
// 绘制圆
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.closePath();
// 填充颜色
ctx.fillStyle = ‘#08c’;
ctx.fill();
}
// 更新和清理
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawCircle();
if (radius < 150) {radius += 0.7;}else {radius = 0;}// 循环动画requestAnimationFrame(animate);}// 初始化initCanvas();// 执行动画animate();// 代码结束
推荐阅读
- 佳能打印机如何墨盒清零复位视频
- 如何在默纳克服务器上设置密码？ 默纳克服务器怎么输入密码
- 制造测试数据分析,Excel数据分析课后测试
- 下载歪歪
- 详解u盘损坏修复工具哪个好用
- fpga 时序 分析 目的,时序逻辑分析的目的是什么
- 便携打印机,zicox便携打印机
- 流量数据行为分析,不属于基于流量的行为分析
- 在360软件管家里怎样下载360安全浏览器,怎样在电脑上 下载360安全浏览器