Canvas学习笔记之绘制简单路径

文章 未结 0 1.06w
无法显示用户头像
Sandy 4 白金
2019-01-30 12:54:12
1 线段(直线路径) 绘制线段一般步骤: [pre] moveTo(x,y) 移动画笔到指定的坐标点(x,y) lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y) stroke() 根据当前的画线样式,绘制当前或已经存在的路径 [/pre] 2 矩形路径 绘制矩形路径一般步骤: [pre] rect(x, y, width, height) 矩形路径,坐标点(x,y),width height宽高 stroke()或fill 根据当前的样式,绘制或填充路径 也可使用前文提到的strokeRect或fillRect, 或者是通过lineTo拼接成矩形 [/pre] 3 圆弧路径 先看下绘制圆弧的api: [pre] ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); x, y 圆弧中心, radius 圆弧半径, startAngle 起始点, endAngle 圆弧终点, anticlockwise 默认为顺时针, true逆时针 CSS中做旋转用到都是角度(deg),但是arc函数中表示角的单位是弧度,不是角度。角度与弧度的js表达式: 弧度 = (Math.PI/180) * 角度(deg)。 这里弧度是以x轴正方向为基准、默认顺时针旋转的角度来计算 [/pre] 图示: img[https://newecode1024.oss-cn-hongkong.aliyuncs.com/9ffd3340-af4f-4666-a32a-3ecb2ae37e1b.png]  [pre] ctx.beginPath(); ctx.arc(200, 100, 100, 0, Math.PI / 2, false); ctx.closePath(); ctx.stroke(); ctx.fill(); [/pre]

上一篇: 详解Next.js页面渲染的优化方案

下一篇: 代码详解django中数据库设置

声明:本文所有观点仅代表创作者本人,ECode1024系信息收集发布平台,ECode1024仅提供信息存储以及展示服务。若有侵权,请联系我们删除。
回复
  • 暂无任何回复,抢个沙发吧~~
layui

微信扫码关注 ECode1024 公众号带给你更多优质内容