慕课网

精品课程 Canvas绘图详解

Canvas绘图详解

                    
                    liuyubobobo
                全栈工程师

                难度中级
            
                时长 4小时35分

最热最新

慕村3232222

没有专门绘制阴影的函数，在设置了关于阴影的状态量之后阴影就会自动出现。
四个状态量：
context.shadowColor、context.shadowOffsetX、context.shadowOffsetY、context.shadowBlur

查看全部

1 采集收起来源：阴影
2018-08-12
慕村3232222 00:30

度量文本的用context.measureText(String).width，需要提前确定font状态，目前只能获得宽度不能获得高

查看全部

1 采集收起来源：文本的度量
2018-08-11
慕村3232222

文本水平方向对齐设置状态context.textAlign(left center right)，以fillText或strokeText的X值为参考
文本垂直方向对齐设置状态context.textBaseline(top middle bottom ideographic hanging alphabetic)

查看全部

1 采集收起来源：文本对齐
2018-08-11
慕村3232222

context.font设置状态，五个参数依次是font-style(italic oblique)、font-variant(small-caps)、font-weight(bold lighter bolder)、font-size、font-family

查看全部

0 采集收起来源：font：字型、字号和字体
2018-08-11
慕村3232222

x0,y0是arcTo()的绘制起点，但不一定是切点当半径过大时，切点在延长线上

查看全部

1 采集收起来源：arcTo()，另一种弧线绘制方法
2018-08-11
Ungalo

context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)矩形左上角坐标和长宽
表示颜色的方式

查看全部

0 采集收起来源：矩形、覆盖和透明色
2018-08-05
Ungalo
1. context.closePath()封闭图形
2. context.beginPath与context.closePath()成对出现绘制封闭图形
3. 封闭多边形之后可以为图形上色
4. 例：context.fillStyle=“yellow”
context.fill()
5.对于填充色之后线条边框变窄，可以将stroke和fill交换位置，先进行颜色填充，后绘制边框

将所有的状态放在一起，绘制放在一起，不影响结果
查看全部

0 采集收起来源：多边形的填充和closePath
2018-08-05
Ungalo
1. moveTo笔尖的位置
2. lineTo绘制终点位置
3. context.beginPath声明进行一段全新的绘制，开启新的状态
  为了代码的一致性，最好写beginPath
4. beginPath+lineTo=moveTo
查看全部

0 采集收起来源：线条组成的图形和beginPath
2018-08-05
Ungalo
1. 获取canvas标签
2. getElementById得到canvas标签
3. 获取canvas上下文绘图环境
查看全部

1 采集收起来源：回顾——从线条开始
2018-08-05
Ungalo

context.arcTo(x1,y1,x2,y2,radius)绘制圆弧

查看全部

0 采集收起来源：arcTo()，另一种弧线绘制方法
2018-08-05
慕运维9164912

绘制矩形：cxt.rect(x,y,width,height）左上角的横纵坐标、矩形的宽和高
cxt.fillRect(x,y,width,height)
cxt.strokeRect(x,y,width,height)

查看全部

0 采集收起来源：矩形、覆盖和透明色
2018-07-21
韩侠
```
ctx.measureText('').width
```
获取文本宽度
查看全部

0 采集收起来源：文本的度量
2018-07-04
_Toney 05:23

画一条线 moveTo(10,10)起始位置 lineTo(10,100)截止位置

查看全部

0 采集收起来源：回顾——从线条开始
2018-07-01
一一一呀 04:40

五角星绘制

查看全部

0 采集收起来源：画一个五角星
2018-06-22
慕用6095593 02:40

canvas 绘制贝塞尔曲线！

查看全部

1 采集收起来源：quadraticCurveTo()，二次贝塞尔曲线
2018-06-14

首页上一页 17 18 19 20 21 22 23 下一页尾页

0/150

提交

取消

开始学习

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

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