Canvas绘图详解_技术问答

首页免费课 Canvas绘图详解问答

Canvas绘图详解

                
                liuyubobobo
            全栈工程师

                    查看讲师更多课程 
                    liuyubobobo讲师的其他课程
                
算法与数据结构（C++版） 面试/评级的算法复习技能包
实战·初级·11186

                                                                                                                                    ￥166.00
                                            
玩转算法面试-- Leetcode真题分门别类讲解
实战·初级·7408

                                                                                                                                    ￥266.00
                                            
 7个经典应用诠释Java算法精髓
实战·初级·1883

                                                                                                                                    ￥69.00
                                            
Python3入门机器学习&nbsp;经典算法与应用&nbsp;&nbsp;
实战·中级·5841

                                                                                                                                    ￥499.00
                                            
结合编程学数学 专为程序员设计的线性代数
实战·初级·3404

                                                                                                                                    ￥348.00
                                            
玩转算法系列--图论精讲（Java版）
实战·中级·1591

                                                                                                                                    ￥348.00
                                            
                难度中级
            
                时长 4小时35分
            
                学习人数
            
综合评分9.63
                            187人评价
                        查看评价
                                9.9
                                内容实用
                            
                                9.6
                                简洁易懂
                            
                                9.4
                                逻辑清晰

全部评论问答未解决精华

iFaye

transform貌似没有设置旋转特性的参数。

0 4-4 深入理解图形变换

2016-07-06

iFaye

如果你绘制的图形坐标是用context.translate()来进行改变的，那么用context.scale()进行缩放是不会影响坐标位置的，但是仍然会影响边框的粗细等数值特性。

0 4-3 应用translate、rotate和scale

2016-07-06

求助：为什么我优化代码后画出来的不是星星？

已采纳回答 / 苏菲刀客

starpath函数最后没有cxt.fill()

2 回答 1087 浏览 4-2 图像变换和状态保存

2016-07-05

iFaye

只能用于线条的开始和结尾处，不能用于线条的连接处，仔细理解这句话的意思，比如你画了一条线，
cxt.beginPath();
cxt.moveTo(200, 500);
cxt.lineTo(400, 300);
cxt.closePath();
然后再设置cxt.lineCap = 'round';会发现是不起作用的，因为cxt.closePath()有自动闭合图形的功能，这是你在看开头第一句话，是不是理解为什么不起作用了吧

4 3-1 线条的帽子：lineCap

2016-07-05

iFaye

那么相应的矩形，六角形，三角形，任意对称多边形都可以利用圆绘制出来。

0 3-2 画一个五角星

2016-07-05

Sturrbon

大家加油！

0 4-1 画一片星空

2016-07-05

我的代码不知道哪儿错了~

已采纳回答 / iFaye

选择button那里吧＃号去掉

2 回答 885 浏览 8-2 globalAlpha和globalCompositeOperation

2016-07-04

哲学_复兴

谷歌大法好！

0 9-4 Canvas与浏览器兼容性

2016-07-04

哲学_复兴

被这章的封面骗了呜呜

0 7-5 小结：文字的渲染

2016-07-04

星星闪效果

最新回答 / ttwhy

通过setInterval不停改变星星的opacity可以实现闪烁。用老师之前讲的 setInterval(function(){ render(context); update(); },200)这个方法。不间断绘制及改变底层参数。

4 回答 1640 浏览 4-5 小结：星空和图形变换

2016-06-30

update动画

+ 我来回答回答最高可+2积分

1 回答 800 浏览

2016-06-30

慕网老油条

大家加油~

0 3-2 画一个五角星

2016-06-28

我想做前端大牛

对于这门课程为了减少个别同学的学习弯路，把我学习过程中遇到的小知识点贴出来！
首先要知道Math.sin(x),此处的参数x为弧度制，而非角度制，必须清楚。
第二要懂得角度转弧度的转换。数学知识普及2π弧度=360度（一个半径的弧长对应的弧度为1弧度）那么2π个r的弧长对应的角度为2π
ok下面就转化把，18度=18×π/180 如果绕不过来就直接（2π弧度=360度）

4 3-2 画一个五角星

2016-06-27

HackerX

两坐标点的距离是用勾股定理算的

0 6-3 绘制一角弯月

2016-06-26

阿柴chai

老师讲的很棒

0 2-3 线条组成的图形和beginPath

2016-06-26

shinefly170

为什么是-Math.sin（（54+i*72）/180*Math.PI）*0.5）而不是-Math.sin（（54+i*72）/180*Math.PI）*0.5 求指教

2016-06-22

首页上一页 44 45 46 47 48 49 50 下一页尾页

开始学习

课程须知: 需有基础HTML,JS,CSS知识。需学习《绚丽的倒计时效果》Canvas绘图第一课。

老师告诉你能学到什么？: 深入了解Canvas各个绘图接口的使用方法。基础图形学知识。通过对一些基本元素的绘制，启发大家更多有效地绘图方法。

微信扫码，参与3人拼团

热搜

最近搜索清空