为了账号安全,请及时绑定邮箱和手机立即绑定
  • 剪辑区域 context.clip() 路径规划
    查看全部
    0 采集 收起 来源:clip和剪辑区域

    2015-08-25

  • xx.globalAlpha = 1 (默认,即不透明) xx.globalCompositeOperation = "source-over" (默认,后绘制的图形会压在先绘制的图形上) / "destination-over"(先绘制的图形压在后绘制的图形上)
    查看全部
  • 阴影: context.shadowColor //阴影颜色 context.shadowOffsetX //阴影在水平方向上的位移值 context.shadowOffsetY //阴影在竖直方向上的位移值 context.shadowBlur //阴影的模糊程度(值越大,越模糊,0表示不模糊)
    查看全部
    0 采集 收起 来源:阴影

    2015-08-25

  • 文本的度量: context.measureText( string ).width; 获得文本的宽(长)度
    查看全部
    0 采集 收起 来源:文本的度量

    2015-08-25

  • canvas 文字垂直对齐 是根据context.fillText(string,x,y)中的y值进行上对齐、下对齐或居中的。 后面三个分别表示拉丁文的垂直方向基准线、日语中文等方块字的垂直方向基准线、印度文的垂直方向基准线。 水平对齐 context.textAlign = left/middle/right 是根据context.fillText(string,x,y)中的x值进行左对齐、右对齐或居中的。
    查看全部
    0 采集 收起 来源:文本对齐

    2015-08-25

  • font-style: normal(默认)/italic(斜体字)/oblique(倾斜字体) font-variant:normal(默认)/small-caps(只要在使用英文小写字母时才能看出区别,以一种小型的大写字母形式显示小写字母) font-weight:lighter/normal(默认)/bold/bolder,,也可以使用数字设置:100,200,300,400(默认),500,600,700(bold),800,900 font-size:px(默认,如20px)/em(如2em)/百分比%(如150%),也可以使用以下属性值进行设置:xx-small, x-small, medium, large, x-large, xx-large font-family:可以设置多种字体备选;支持@font-face;web安全字体
    查看全部
  • context.font="样式 字号 字体"; context.fillText("书写的文字",文字的x,文字的y,最长宽度:单位为像素); context.strokeText("",x,y,最长宽度:单位为像素)
    查看全部
    0 采集 收起 来源:文字渲染基础

    2018-03-22

  • 图片填充: createPattern( img, repeat-style ); 画布填充: createPattern( canvas, repeat-style ); 视频背景填充: createPattern( vedio, repeat-style );
    查看全部
  • canvas 径向渐变: step1: var grd = context.createRadialGradient( x0, y0, r0, x1, y1, r1 ); step2: grd.addColorStop( stop, color );
    查看全部
    0 采集 收起 来源:径向渐变

    2015-08-25

  • fillStyle除了可以设置颜色,还可以设置渐变(线性渐变和径向渐变)。 线性渐变: //两个坐标构成一个线段,即渐变线(用于定义渐变的方向和尺度) step1: var grd = context.createLinearGradient( xstart, ystart, xend, yend ); //渐变线上的关键色(参数stop是一个浮点值,决定关键色的位置;参数color决定关键色的颜色) step2: grd.addColorStop( stop, color );
    查看全部
    0 采集 收起 来源:线性渐变

    2015-08-25

  • canvas 变换矩阵 context.transform(a, b, c, d, e, f); /* a:水平缩放(默认值1) b:水平倾斜(默认值0) c:垂直倾斜(默认值0) d:垂直缩放(默认值1) e:水平位移(默认值0) f:垂直位移(默认值0) */ context.transform();可以叠加使用,如果需要重新初始化矩阵变换的值,可以用: context.setTransform(a, b, c, d, e, f); 它会使得之前设置的context.transform()失效,恢复为单位矩阵然后再transform
    查看全部
  • scale( sx, sy )操作具有副作用,表现为不仅对图像的大小进行缩放操作,还对图像的其他数值属性(比如边框的宽度,左上角的坐标等等)进行相应的缩放操作。
    查看全部
  • save() restore() 状态保存与恢复
    查看全部
  • canvas 图像形变换
    查看全部
  • miterLimit
    查看全部

举报

0/150
提交
取消
课程须知
需有基础HTML,JS,CSS知识。需学习《绚丽的倒计时效果》Canvas绘图第一课。
老师告诉你能学到什么?
深入了解Canvas各个绘图接口的使用方法。基础图形学知识。通过对一些基本元素的绘制,启发大家更多有效地绘图方法。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!