慕课网

炫丽的倒计时效果Canvas绘图与动画基础

                    
                    liuyubobobo
                全栈工程师

                难度中级
            
                时长 1小时30分

最热最新

害羞的西红柿 02:40
圆心位置在最有
```
// context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
```
查看全部

0 采集收起来源：绘制弧和圆
2023-06-16
害羞的西红柿 01:26
状态设置和绘制，现有状态，在去绘制
- moveTo，把一直笔放到了这个位置
- lineTo 滑到那个位置
- 原点的位置是左上角向左-> 向下
查看全部

0 采集收起来源：绘制直线、多边形和七巧板
2023-06-16
qq_仰琞_0 13:44

// canvas绘制是基于状态进行绘制的；
//1. 定义路径context.moveTo(0,0)context.lineTo(200, 200)

//2. 定义多个路径，使用context.beginPath() context.closePath()分割
//3. 使用context.lineWidth context.strokeStyle context.fillStyle 设置线段的宽度，线段颜色，填充颜色
//4. 使用 contxt.stroke()绘制线段；使用context.fill()填充颜色

查看全部

0 采集收起来源：绘制直线、多边形和七巧板
2023-03-15

慕粉1237325388 00:05

哈哈，画了一个没什么用的圆

window.onload = function () {
    const canvas = document.getElementById("canvas")
    const context = canvas.getContext('2d')
    context.lineWidth = 6
    const count = 100
    let p =0
    let n =0.12 * Math.PI

    for (let i = 0; i <= count; i++) {
        const r = Math.floor(Math.random() * 255)
        const g = Math.floor(Math.random() * 255)
        const b = Math.floor(Math.random() * 255)
        const c = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}000`

        context.beginPath()
        context.arc(330, 300, 200, p , n,)
        context.strokeStyle = c.slice(0, 7)
        p =  n
        n =2 * Math.PI*(i+1)/count
        context.stroke()
    }
}

查看全部

0 采集收起来源：绘制弧和圆

2022-10-24

慕侠7578385 01:50

11111111111111111111111111111

查看全部

0 采集收起来源：绘制直线、多边形和七巧板
2022-01-05
慕侠7578385 00:50

111111111111

查看全部

0 采集收起来源：绘制直线、多边形和七巧板
2022-01-05
慕侠7578385 06:21

2222222222222222222222

查看全部

0 采集收起来源：创建canvas
2022-01-05
慕侠7578385 06:21

2222222222222222222222

查看全部

0 采集收起来源：创建canvas
2022-01-05
慕侠7578385 06:21

创建canvas笔记：

查看全部

0 采集收起来源：创建canvas
2022-01-05
慕侠7578385 06:17

111111111111111111

查看全部

0 采集收起来源：创建canvas
2022-01-05
silence1210 06:08

动画
更加精确的动画

查看全部

0 采集收起来源：一个实现动画的基础函数
2021-05-17
慕容0133956 13:30

碰撞检测

查看全部

0 采集收起来源：绘制直线、多边形和七巧板
2021-03-09
论斤烤 01:50

总结-Context

查看全部

0 采集收起来源：总结
2020-12-01
论斤烤 02:23

Render a digit原理图

查看全部

0 采集收起来源：倒计时数字钟的具体绘制
2020-11-29
论斤烤 05:15

接上次……

查看全部

0 采集收起来源：创建canvas
2020-11-29
论斤烤 04:08

canvas html base

查看全部

0 采集收起来源：创建canvas
2020-11-29
论斤烤 00:43

数字显示原理

查看全部

0 采集收起来源：倒计时程序的基本架构
2020-11-25
论斤烤 07:45

arc多例效果

查看全部

0 采集收起来源：绘制弧和圆
2020-11-25
论斤烤 05:52

arc代码2

查看全部

0 采集收起来源：绘制弧和圆
2020-11-25
论斤烤 02:50

arc代码例子

查看全部

0 采集收起来源：绘制弧和圆
2020-11-25
论斤烤 01:43

Draw an arc

查看全部

0 采集收起来源：绘制弧和圆
2020-11-25
论斤烤 01:00

Draw an arc

查看全部

0 采集收起来源：绘制弧和圆
2020-11-25
论斤烤 08:45

Draw复习

查看全部

0 采集收起来源：绘制直线、多边形和七巧板
2020-11-25
论斤烤 08:25

绘制两个图形的代码

查看全部

0 采集收起来源：绘制直线、多边形和七巧板
2020-11-25
论斤烤 05:41

绘制三角形

查看全部

0 采集收起来源：绘制直线、多边形和七巧板
2020-11-25
论斤烤 03:46

Canvas基本代码

查看全部

0 采集收起来源：创建canvas
2020-11-25

首页上一页1 2 3 4 5 6 7 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.要对HTML+CSS相关标签有所掌握；2.对网页布局知识有简单的了解；3.掌握一定的JS基础知识

老师告诉你能学到什么？: 通过学习Cancas倒计时效果的基础知识：比如球形的绘制，动画的基础原理，让Canvas帮助我们制作出绚丽的效果，力图每一个课程除了介绍知识，还能帮助大家使用Canvas制作出属于自己的动画和游戏作品。