欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript CSS画图之基础篇_javascript技巧

程序员文章站 2022-03-24 12:10:53
...
一、图显示的样式,即图形的颜色、透明度等;二、算法,即图形的样子,是简单的线、矩形、圆形、扇形、多边形等,javascript和CSS无疑是最佳搭档,所有的矢量图形最基本的元素是1*1px的点,点可以成线、成面,成任意图形。
一切矢量图的根本____1*1px的点
如果对CSS有一定的了解,对 clip:rect(top,right,bottom,left)熟悉的话,可以知道,代码剪辑出一个区域,需要注意的是,clip:rect中的四个边的位置是相对于对象的而不是相对于窗口的,另外在此position必须为absolute。
可以画出一个红色的点
算法能成图的根本____在特定位置画点
通过css的 left和top,在特定一个位置画图,将算法实现成可见图形的根源可以解决,如下这段代码可以在(100,100)的坐标位置画一个1*1px的红点

成为有生产力代码的根本___抽象、精简
(如果只是上面一行代码,着实没有什么好研究的,相反如果把最根本的能很好的抽象出来,就大不一样了),
上面的一行代码其实可以抽象成,在特定坐标点上(x,y),画一个高度为h,宽度为w的区域,并且画笔的颜色为color,为了更方便利用,可以精炼成如下方法:
复制代码 代码如下:

function _mkDiv(x, y, w, h,color)
{
'
';
}
javascript CSS画图之基础篇_javascript技巧

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频