canvas知识总结

阿拉灯神丁吖

已于 2022-06-21 13:56:56 修改

阅读量95

点赞数

文章标签：前端 javascript html

于 2022-06-21 09:20:33 首次发布

本文链接：https://blog.csdn.net/weixin_52335062/article/details/125371759

版权

一、介绍

1、是HTNL5重要元素，不需要外部插件支持，提供了强大的图形处理功能，常用于移动端web的开发；

2、基本现代浏览器都支持，IE8以下不支持

3、进行绘制，是通过context环境进行操作的

var canvas = document.querySelector("canvas");

var context = canvas.getContext("2d");

4、坐标系

横轴向右为正，纵轴向下为正；

二、基本图形绘制

1、基础

●beginPath() 开始绘制；

●moveTo(x,y) 设置绘制起点；

●lineTo(x,y) 设置下一个点；

●closePath() 结束绘制，会从当前点回到结束点，形成一个封闭的图形；

●strokeStyle 设置绘制的样式；

●stroke() 绘制点之间的路线；

●fillStyle 设置填充样式；

●fill() 填充当前绘图；

●lineWidth 线宽；

2、绘制直线

context.beginPath();  //开始绘制
context.moveTo(0,0);  //设置起点
context.lineTo(100,100);  //设置下一个点
context.closePath();  //结束绘制
context.s

关注