canvas

<canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。
不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。

canvas元素绘制图像的时候有两种方法,分别是

context.fill()//填充

context.stroke()//绘制边框


style:在进行图形绘制前,要设置好绘图的样式

context.fillStyle//填充的样式

context.strokeStyle//边框样式

context.lineWidth//图形边框宽度

绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)

x:矩形起点横坐标(坐标原点为canvas的左上角,当然确切的来说是原始原点,后面写到变形的时候你就懂了,现在暂时不用关系)

y:矩形起点纵坐标

width:矩形长度

height:矩形高度

清除矩形区域 context.clearRect(x,y,width,height)

x:清除矩形起点横坐标

y:清除矩形起点纵坐标

width:清除矩形长度

height:清除矩形高度

圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

x:圆心的x坐标

y:圆心的y坐标

straAngle:开始角度

endAngle:结束角度

anticlockwise:是否逆时针(true)为逆时针,(false)为顺时针

绘制线段 context.moveTo(x,y) context.lineTo(x,y)

x:x坐标

y:y坐标

每次画线都从moveTo的点到lineTo的点,

如果没有moveTo那么第一次lineTo的效果和moveTo一样,

每次lineTo后如果没有moveTo,那么下次lineTo的开始点为前一次lineTo的结束点

给图形绘制阴影

context.shadowOffsetX :阴影的横向位移量(默认值为0)
context.shadowOffsetY :阴影的纵向位移量(默认值为0)
context.shadowColor :阴影的颜色
context.shadowBlur :阴影的模糊范围(值越大越模糊)

绘制文字

text:要绘制的文字

填充文字:context.fillText(text,x,y)

x:文字起点的x坐标轴

y:文字起点的y坐标轴

绘制文字轮廓 context.strokeText(text,x,y)

context.font:设置字体样式

context.textAlign:水平对齐方式

start、end、right、center

context.textBaseline:垂直对齐方式

 

转载于:https://www.cnblogs.com/WXSWSS/p/5440703.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值