canvas绘图API

这篇博客深入探讨了HTML5 Canvas API,包括如何创建绘图路径、绘制圆形、贝塞尔曲线,以及设置线条和填充样式。还介绍了填充和描边矩形、绘制文本以及图片操作的方法,是Web前端开发者理解Canvas图形绘制的重要教程。
摘要由CSDN通过智能技术生成

getContext("2d")    创建绘图对象

beginPath()        开始绘制路径

closePath()       结束绘制路径,闭合线框

moveTo(x,y)        移动到绘制起点

lineTo(x,y)        画线段到指定点

arc(x,y,r,start,end)    绘制圆形(弧度单位)

quadraticCurveTo(x,y,endX,endY)  二次贝塞尔曲线

bezierCurveTo(x1,y1,x2,y2,endX,endY)三次贝塞尔曲线

stroke()              线条类型

fill()            填充类型

fillRect(x,y,w,h)   填充矩形

strokeRect(x,y,w,h)  线框矩形

clearRect(x,y,w,h)   清楚矩形

strokeText(string,x,y)  绘制线条文字(空心)

fillText(string,x,y)   绘制填充文字(实心)

drawImage(img,x,y,width,height)  绘制图片(须在img的load函数中)

save()        保存当前状态设定

restore()         恢复到保存之前的状态设定

rotate()        旋转画布角度(弧度制)

fillStyle        填充颜色(支持rgb(),#fff,red)

strokeStyle      线条颜色

lineWidth         线条宽度(整数值,默认单位px)

lineJoin           折线拐角类型(round表示圆角)

font                 支持多个值,例如"10px 宋体"

textBaseline    文字基点(默认botto左下为基准点,top为左上)

arc 弧
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值