![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
canvas操作
文章平均质量分 55
M78_国产007
前端越学越不懂 难受嗷
展开
-
利用canvas画图片
H5时,canvas提供了一个方法drawImage()将原图片像素的内容复制到画布上,占用资源就会很小,因为画布是由JS代码编写,就算是几千行代码也才可能几K的大小。九个参数时drawlmage(img,sx,sy,sw,sh,dx,dy,dw,dh)剪切图像,并在画布上定位被剪切的部分。五个参数时drawImage(img,dx,dy,dw,dh)在画布指定位置上按原图大小绘制指定大小的图。第九个参数dheight(可选)使用的图像的高度;...原创 2022-07-23 20:40:40 · 641 阅读 · 0 评论 -
canvas绘制文本和清除绘制
除了这里的清除绘制外,window对象还为我们提供了一个方法清除绘制。fillText()有五个参数,第一个参数为绘制内容(字符串),第二个参数为起点x轴坐标,第三个参数为起点y轴坐标后两个参数可选,为最大宽度和最大高度。属性值有top、hanging、middle、alphabetic、ideographic、bottom。属性值有start、left、center、right、end。第一个参数为矩形的左上角顶点的x轴坐标;第二个参数为矩形的左上角顶点的y轴坐标;第四个参数为矩形的高度。......原创 2022-07-23 13:46:42 · 3362 阅读 · 0 评论 -
学会用canvas构建折线图、柱状图、饼状图
x为左上角顶点的x轴坐标,y为左上角顶点的y轴坐标,width为矩形的宽度,height为矩形的高度;区别在于fillRect()会自动矩形填充颜色,而rect()还需要上下文对象调用fill()。但是对于构建矩形,canvas提供了rect()方法和fillRect()方法可以直接绘制一个矩形。moveTo()开始定义一条新的子路径,该方法确定了线段的起点。fill()填充区域,此时只是填充,起点和终点并没有连接起来;lineTo()将上面定义的线段起点和指定的新的点连接起来;...原创 2022-07-22 23:55:37 · 867 阅读 · 0 评论 -
了解canvas
需要补充一点关于lineTo()这个方法,是将moveTo()设置的起点与当前lineTo的点连接起来;但是当没有设置moveTo()时,lineTo()会将上条线段的终点当作起点。画布以浏览器可视区域左上角(0,0)为坐标原点;3、canvas点getContext("2d")得到一个“绘制上下文”对象。画布的宽度和高度要用canvas的属性设置,不要直接在css里面定义;canvas画布,h5新出的技术,用js来画图。4、这个对象调用相应的方法,画线或着色。2、获取创建的canvas元素。.......原创 2022-07-22 18:44:28 · 180 阅读 · 0 评论