【画布---H5的新增技术】

最新推荐文章于 2023-10-18 16:45:52 发布

m-TT

最新推荐文章于 2023-10-18 16:45:52 发布

阅读量483

点赞数

分类专栏：画布文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44892365/article/details/128183345

版权

一.H5（HTML5）的新增技术

1.绘画：画布（canvas）的使用

2.画布：页面中用于绘画图形的特殊区域，开发人可以在这个区域内进行自定义图形的绘制

（1）创建画布的方法：

（2）获取画布：getElementById('canvas的id')

（3）获取画笔：使用context对象，语法格式是：

（4）绘制直线：直线的起始点、直线的终点、描边（设置线条的颜色）

（5）设置描边的颜色：context.strokeStyle = 'pink' //设置描边的颜色。颜色值可以是十六进制、颜色名

（6）设置端点的形状：使用lineCap = '属性值' 来设置端点的形状，取值有三种

（7）路径的重置：beginPath()

（8）闭合路径：closePath()

（9）设置线宽：lineWidth = '数值'

（10）填充路径：fill()

（11）设置填充颜色：fillStyle = '颜色'

（12）画弧线或画圆：arc(x,y,r,开始角,结束角,方向)

（13）画矩形：rect(x,y,width,height)，x和y表示矩形左上角的坐标

（14）填充矩形：fillRect(x,y,width,height)，x和y表示矩形左上角的坐标

（15）绘制文本：context.fillText(text,x,y)，text表示要绘制的文本，x和y表示坐标位置

（16）平移当前的坐标系：context.translate(x,y)

（17）设置坐标系的旋转角度：context.rotate(deg)

（18）绘制图像：fillImage(image,x,y)

笑脸

绘制验证码

一.H5（HTML5）的新增技术

1.绘画：画布（canvas）的使用

2.画布：页面中用于绘画图形的特殊区域，开发人可以在这个区域内进行自定义图形的绘制

（1）创建画布的方法：

<canvas id="画布的标识" width="宽" height="高">
        你的浏览器不支持画布
</canvas>

（2）获取画布：getElementById('canvas的id')

（3）获取画笔：使用context对象，语法格式是：

let context = canvas.getContext('2d')    //context代表的是一支笔

（4）绘制直线：直线的起始点、直线的终点、描边（设置线条的颜色）

let canvas = document.getElementById('canvas')  //获取画布
let context = canvas.getContext('2d')   //获取画笔
context.moveTo(100,100)         //确定起始点(100,100) ，即将画笔移动到该点上。
context.lineTo(200,200)     //确定线条的另一个端点（终点）（200，200）.
context.strokeStyle = 'pink' //设置描边的颜色
context.stroke()    //进行描边，让线条可见（默认的画笔颜色为黑色）