canvas 学习笔记
2024-10-21 09:40:40
1.利用上下文对象进行绘制画笔
var canvas=canvas.getContext('2d')
2.绘制路径
canvas.rect(30,30,300,300)
3.填充
canvas.fillStyle('#ddd')
canvas.fill()
4描边
canvas.stroke()
5线段
canvas.moveTo(50,50) //起点
canvas .lineTo(.50,300)//经过位置
canvas .closePath//结束
canvas.stroke()
5线段终点样式
lineCap
6画圆
canvas.arc(300,300,100,Math.PI,false)
canvas.stroke()
//位置,半径,画的长度到π,逆时针
7绘制文本
canvas.fillText()
canvas.strokeText()
8添加图片
function drawIMG() {
const ctx=document.getElementById('contain').getContext('2d')
var img = new Image();
img.onload = function(){
ctx.drawImage(img,35,35,140,140);
ctx.stroke();
}
img.src =icon;
}
最新文章
- 搭建LNAMP环境(七)- PHP7源码安装Memcached和Memcache拓展
- Android 获得AndroidManifest文件里自定义的meta标签内容
- iOS解析数据时Error=3840
- 510C
- Visual Studio Online Integrations-Collaboration
- POJ 1411
- JDK7 HashMap源码分析
- Linux文件系统与结构
- 怎样取消shutdown关机命令?-shutdown命令的使用解析
- Synchronized的用法
- 2D游戏开发(2)
- linux下tomcat作为daemon进程运行
- 写一个ORM框架的第一步
- 看得懂的区块链,看不清的ICO人心
- Otto事件总线框架的使用
- C#模板设计模式使用和学习心得
- 笔记02 linux的一些命令sed
- js中json的使用
- suoi63 树与路径 (倍增lca)
- Android Studio 运行出现 Multiple dex files define Landroid/support/annotation/AnimRes 解决方法
热门文章
- Ubuntu 安装播放器
- 使用Lighthouse更好推动项目性能优化,性能指标详解,优化方法,需要关注指标分析
- 异常处理的第二种方式-Throwable类中3个异常处理的方式
- Linux安装KingbaseES数据库 Unsupported major.minor version错误处理
- 【学习日志】Cglib动态代理和JDK动态代理的对比
- 电商网站Web自动化测试实战( 编写京东搜索脚本python+selenium框架)
- IoT 边缘集群基于 Kubernetes Events 的告警通知实现
- .NET NPOI导出时间、公式等格式化
- vim之YouCompleteMe插件问题:The ycmd server SHUT DOWN (restart with ...low the instructions in the documen
- SVN服务器的安装与使用