javascript CSS画图之基础篇

一、图显示的样式，即图形的颜色、透明度等；二、算法，即图形的样子，是简单的线、矩形、圆形、扇形、多边形等，javascript和CSS无疑是最佳搭档，所有的矢量图形最基本的元素是1*1px的点，点可以成线、成面，成任意图形。
一切矢量图的根本____1*1px的点
如果对CSS有一定的了解，对 clip:rect(top,right,bottom,left)熟悉的话，可以知道，代码剪辑出一个区域，需要注意的是，clip:rect中的四个边的位置是相对于对象的而不是相对于窗口的，另外在此position必须为absolute。
<div style="position:absolute;width:1px;height:1px;background-color:red; clip:rect(0,1,1,0);"></div>可以画出一个红色的点
算法能成图的根本____在特定位置画点
通过css的 left和top，在特定一个位置画图，将算法实现成可见图形的根源可以解决，如下这段代码可以在(100,100)的坐标位置画一个1*1px的红点
<div style="position:absolute;left:100px;top:100px;width:1px;height:1px;background-color:red; clip:rect(0,1,1,0);"></div>
成为有生产力代码的根本___抽象、精简
（如果只是上面一行代码，着实没有什么好研究的，相反如果把最根本的能很好的抽象出来，就大不一样了），
上面的一行代码其实可以抽象成，在特定坐标点上(x，y),画一个高度为h,宽度为w的区域，并且画笔的颜色为color，为了更方便利用，可以精炼成如下方法：


代码如下:

function _mkDiv(x, y, w, h,color)
{
'<div style="position:absolute;'+
'left:' + x + 'px;'+
'top:' + y + 'px;'+
'width:' + w + 'px;'+
'height:' + h + 'px;'+
'clip:rect(0,'+w+'px,'+h+'px,0);'+
'background-color:' + color +
';"><\/div>';
}

赞 (0)

相关推荐

  • angularJS结合canvas画图例子

    这里给大家分享一个angularJS结合canvas画图例子,效果非常不错,赞一个先. 复制代码 代码如下: <!DOCTYPE html> <html ng-app="APP"> <head>     <meta charset="UTF-8">   <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js&

  • 使用js画图之正弦曲线

    数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html JS函数的声明: 复制代码 代码如下: //画正弦曲线 //dot 原点 //amplitude    振幅 -- A //initialPhase 初相 -- φ //setover 偏距 -- k //palstance 角速度 -- ω //len 周期数 function drawSinusoid(dot, amplitude,initialPhase,palst

  • 使用js画图之饼图

    使用js画图之饼图 饼图是将一个圆分割为多个扇形. 样例:http://www.zhaojz.com.cn/demo/draw8.html 复制代码 代码如下: //饼图 //dot 圆点 //r 半径 //data 数据(一维数组) function drawPie(dot, r, data){     if(data && data.length > 0){         var accumulationAngleOfSlope = new Number(0); //累计偏移角

  • 用javascript实现画图效果的代码

    Untitled Document function $(pId){ return document.getElementById(pId); } function JPos(){ } JPos.getAbsPos = function(pTarget){ var _x = 0; var _y = 0; while(pTarget.offsetParent){ _x += pTarget.offsetLeft; _y += pTarget.offsetTop; pTarget = pTarget

  • js面向对象实现canvas制作彩虹球喷枪效果

    js面向对象实现canvas制作彩虹球喷枪效果

    前段时间在研究canvas,感觉还挺好玩的,就写了一个小demo,效果如下: 第一次尝试用js面向对象的方式来写,经验不足,还请大家多多包涵. 下面开始简单介绍代码: canvas画布: 复制代码 代码如下: <canvas id='canvas' width='1050' height='500' style='background:#333;overflow: hidden;'></canvas> 彩虹球的随机颜色是通过下面两个方法来实现的,在<js常用方法和一些封装(2

  • 使用JS画图之点、线、面

    JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 这里的点我们使用span标签表示 复制代码 代码如下: //描点,参数有点的大小,颜色,点的坐标和标签; 很明显opts参数是一个对象 function drawPoint(opts){     document.write("<span id='"+opts.point[0]+&q

  • 使用js画图之圆、弧、扇形

    半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA;  y = y0+rsinA ,A为弧度 样例:http://www.zhaojz.com.cn/demo/draw6.html 一.圆 复制代码 代码如下: //圆形/椭圆 //dot 圆点 //r 半径 //compressionRatio 垂直压缩比 function drawCircle(dot, r, compressionRatio, data){     var pstart = [dot[0]

  • JS实现简单的Canvas画图实例

    定义变量:[javascript] 复制代码 代码如下: var startX; var startY; var endX; var endY; var radius; var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var select = document.getElementsByTagName("select"

  • 兼容FireFox 用javascript写的一个画图函数

    早晨醒来突然想写一个画图函数,以前在网上看到有人做过,但都是用VML做的,只有ie支持. 偶这个是用<div>形成的绝对定位的点画出来的,兼容各种浏览器. Untitled 1 .style1 { font-size: x-small; } function makedot(x,y){ //画点函数 document.write(" ") } /** 函数功能:根据给定的圆心和半径画圆 函数思路:根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标,并画出来. *

  • JS画图(非VML)--兼容IE/FF

    Untitled 1 .style1 { font-size: x-small; } function makedot(x,y){ //画点函数 document.write(" ") } /** 函数功能:根据给定的圆心和半径画圆 函数思路:根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标,并画出来. */ function circle(x,y,r){ //(x,y)圆心,r半径 var dotx,doty,radio; var Pi=Math.PI; makedot

随机推荐