[HTML5] Canvas绘制简单形状
使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画
获取canvas对象,调用document.getElementById()方法
调用canvas对象的getContext()方法,获取context对象,参数:String的”2d”
绘制线段
调用context对象的moveTo()方法,把起点位置定义好,参数:x,y
调用context对象的lineTo()方法,把终点位置定义好,参数:x,y
调用context对象的stroke()方法,画一条线
如果不调用moveTo()方法,起点的位置是上次的点
绘制矩形
调用context对象的fillRect()方法,填充矩形,参数:起点横坐标,起点纵坐标,宽度,高度
调用context对象strokeRect()方法,边框矩形,参数:起点横坐标,起点纵坐标,宽度,高度
例如:context.fillRect(0,0,100,100); 会画出一个黑色的矩形
注意:html5 canvas fillRect坐标和大小一直不对,是因为canvas的宽度和高度必须内联在canvas标签中才对
绘制扇形
调用context对象的beginPath()方法,开启路径
调用context对象的moveTo()方法,把路径移动到圆心位置,参数:x,y
调用context对象的arc()方法,绘制圆弧,参数:圆心x坐标,圆心y坐标,开始角度,结束角度
调用context对象的closePath()方法,关闭路径
调用context对象的fill()方法,填充颜色
绘制贝塞尔曲线
调用context对象的bezierCurveTo()方法,绘制曲线路径,
参数:第一控制点x,第一控制点y,
第二控制点x,第二控制点y,
最终控制点x,最终控制点y
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试canvas</title> </head> <body> <canvas id="myCanvas" width="500px" height="1000px"></canvas> <script> var canvas=document.getElementById('myCanvas'); var context=canvas.getContext("2d"); //绘制矩形 context.fillRect(0,0,100,100); context.strokeRect(120,0,100,100); //绘制扇形 context.beginPath(); context.moveTo(50,220); context.arc(50,220,50,0,Math.PI/4); context.closePath(); context.fill(); //绘制线段 context.moveTo(0,300); context.lineTo(100,300); context.lineTo(100,400); context.stroke(); //绘制贝塞尔曲线 context.moveTo(200,300); context.bezierCurveTo(200,300,250,300,300,400); context.stroke(); </script> </body> </html>
相关文章
- ELK 架构之 Logstash 和 Filebeat 安装配置
- 确定稳定的 Spring Cloud 相关环境版本
- IdentityServer4 SigningCredential(RSA 证书加密)
- ASP.NET WebApi JObject 使用
- Consul 服务注册与服务发现
- EntityFramework.Extended 支持 MySql
- JQuery 复制粘贴上传图片插件(textarea 和 tinyMCE)
- ASP.NET 5 单元测试中使用依赖注入
- ASP.NET Web API 异常日志记录
- Windows 搭建 .NET 跨平台环境并运行应用程序
- IDDD 实现领域驱动设计-理解领域和子域
- 【续集】塞翁失马,焉知非福:由 Styles.Render 所引发 runAllManagedModulesForAllRequests="true" 的思考
- DDD 领域驱动设计-“臆想”中的实体和值对象
- DDD 领域驱动设计-三个问题思考实体和值对象(续)
- EF Code First 一对多、多对多关联,如何加载子集合?
- Why is HttpContext.Current null after await?
- EntityFramework 如何进行异步化(关键词:async·await·SaveChangesAsync·ToListAsync)
- EntityFramework 如何查看执行的 SQL 代码?
- 小菜学习设计模式(四)—原型(Prototype)模式
- C算法编程题(六)串的处理