cnavas

2022-07-26 20:02:33 阅读：125 来源： 互联网

标签：positon canvas lineTo cnavas ctx width 100

canvas

ctx.stroke() ：绘制
ctx.moveTo()：移动到某个位置
ctx.lineTo()：从ctx.moveTo或是上一个ctx.lineTo画直线
ctx.beginPath()：绘制另外的轨迹
ctx.closePath()：闭合轨迹，形成闭合
ctx.rect(x-positon,y-positon,x-width,y-height)：直接绘制矩形框
ctx.strokeStyle：绘制出来图形的颜色
ctx.fill()：把闭合轨迹填充上颜色，默认是黑色

ctx.fillStyle = 'green' 设置颜色
ctx.fillRect(x-positon,y-positon,x-width,y-height))
ctx.arc(x-position,y-positon,r-length,star-deg,end-deg,bloean)：弧线
```
let deg = Math.PI / 180
```
ctx.fillText('content',x-positon,y-position,x-width)：绘制文字
ctx.strokeText()：文字大小
ctx.font：与css的写法一致
```
ctx.font = "89px weiruf"
```
ctx.textAlign：指定水平方向 center left start
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

H5出现的技术，有些低版本的浏览器不会显示出来

<hqyj>对于浏览器不认识的标签，浏览器会把它当作文本标签来显示</hqyj>

canvas元素自己属于图片，相当一个画板，有自己的编码，width和height是属性；css也有高宽，是渲染出来的

<canvas id="" width="" height=""></canvas>

var canvas = document.querSelector('#box')
var pen = canvas.getContext("2d")
pen.moveTo(100,200)
pen.lineTo(400,400)
pen.stroke()

清除画板

重新更改canvas的宽高

利用浏览器的重绘
```
canvas.width = 600
```
ctx.clearRect((x-positon,y-positon,x-width,y-height)

canvas应用

双屏互动
大数据页面==>百度出的框架 echarts
游戏（别人写的函数库）
广告
特效

// 获取canvas元素
var canvas
var ctx = canvas.getContext("2d") // 获取上下文context内容
ctx.moveTo(100,100)
ctx.lineTo(300,300)  // 把上一次的终点作为这一次的七点，意思是不一定要moveTo,直接lineTo就可
ctx.moveTO(400,100)
ctx.lineTO(100,100)
ctx.moveTO(400,100)
ctx.lineTO(300,300) 
ctx.stroke()  //绘制

上下文：别人框架底层api我们用对象来调用，这种对象叫上下文

标签：positon,canvas,lineTo,cnavas,ctx,width,100
来源： https://www.cnblogs.com/shuilifang/p/16522332.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

cnavas

canvas