Canvas 绘图学习笔记2
2024-09-22 15:49:03
1 绘制文本
fillText(string,x,y,maxWidth) //填充试绘制文本
strokeText(string,x,y,maxWidth) 画线试绘制文本
设置字体样式：
context.font 文字的字体样式
可选属性：
font-style 字体样式
font-variant 字体变体
font-weight 字体粗细
font-size
font-family
caption
icon
menu
message-box
small-caption
status-bar
实例：
ctx.font = "30px Georgia"
context.textAlign 文字的对齐方式
start
end
center
left
right
context.textBaseline 调整文本的基线
top
hanging
middle
alphabetic
ideographic
bottom
2.ctx.globalCompositeOperation 设置图形交叉参数
source-atop
....
3.canvas状态的保存与恢复
ctx.save() 保存之前的绘图参数,压栈保存
ctx.restore() 恢复之前保存的绘图参数
4.阴影
ctx.shadowColor
ctx.shadowOffsetX 阴影对于图像的水平偏移
ctx.shadowOffsetY 阴影对于图像的垂直偏移
ctx.shadowBlur 模糊参数
5.绘制图像
var img = new Image();
img.src = "......." img.onload = function()
{
ctx.drawImage(img,x,y);
}
ctx.drawImage(img,x,y);
ctx.drawImage(img,x,y,width,height);
width:绘制图片的最终宽度
height:绘制图片的最终高度 ctx.drawImage(img,sx,sy,swidth,sheight,dx,dy,width,height);
sx:裁剪区域起始横坐标
sy:裁剪区域起始纵坐标
swidth：裁剪区域宽度
sheight：裁剪区域高度
6.drawImage可以用来绘制视频
最新文章
- 让UILabel的文字顶部对齐
- CMPP错误码说明
- IOS: 模型面数控制
- php轮流排序，每隔一定的时间轮流进行位置排序，轮询的排行榜：function dataPollingInterval()
- linux 使用 pyodbc 访问 ms sqlserver 数据库
- dom cookie记录用户名
- 68. Text Justification
- 统一iOS客户端和服务器端认证
- CGAL Manual/tutorial_hello_world.html
- DHTMLX 前端框架 建立你的一个应用程序 教程(七)-- 添加筛选功能
- Bootstrap_Javascript_手风琴
- iOS_数据库3_sqlite3基本操作
- 私有成员的设置和访问方式——set()和get()方法
- 微信小程序（有始有终，全部代码）开发--- 新增【录音】以及UI改进
- 学习Xen
- 《Linux内核设计与实现》 第三章学习笔记
- 小心错误使用EasyUI 让网站性能减半
- FZU 2150 Fire Game（点火游戏）
- excel 单元格内容太多，替换有问题
- 微信 js api[转]