jCanvaScript使用心得1(—常用图绘制方法)

开始绘画

首先将jCanvaScript.js加载到你的页面中,然后获取canvas标签对象并绘图环境设置为2D,如:

<script type="text/javascript" src="jCancaScript.1.5.18.min.js"></script>
<script>
var oc=document.getElmentById("c1");
var ogc=oc.getContext("2d");

开始绘图,用jc.start(canvasId)将绘图的代码包含起来,如下:

jc.start("c1");
jc.circle(100,120,50,'rgba(255,0,0,0.5)',true);
jc.start("c1");
jc.start("c1");//表示只指定id为c1的画布绘制了一次 ,只能进行一次操作
jc.start("c1",true);//第二个参数代表可以重绘,可以进行多个操作

绘制圆形

第一种写法:

circle(x, y, radius, [color], [fill]);
    x、y轴圆心坐标,半径,颜色,是否填充(默认为false||0不填充)如:
jc.circle(100,120,50,'rgba(255,0,0,0.5)',true);

第二种写法1

circle(object parameters);
    将对象作为参数,如:
jc.circle({x:100,y:120,radius:50,color:'#ff0000',fill:1});

绘制矩形

rect(x, y, width, height, [color], [fill]);
    x、y轴左上角坐标,宽高,颜色,是否填充(默认为false||0不填充)如:
jc.rect(80,100,120,50,'rgba(255,156,135,0.5)',1);

绘制弧线

arc(x, y, radius, startAngle, endAngle, [anticlockwise], [color], [fill]);
    x、y轴圆心坐标,半径,起始结束角度,方向(默认为true||1逆时针),颜色,是否填充(默认为false||0不填充)如:
jc.arc(60,100,60,90,180,1,'rgb(25,99,253)',0);

绘制路径

line(points, [color], [fill])
    用多个[X,Y]设置路径的点,颜色,是否填充(默认为false||0不填充)如:
jc.line([[60,20],[75,132],[220,60]],'#ff5587');

绘制二次曲线

绘制二次曲线,数组的点包含数组(x,y,x控制点,控制点y),用于创建曲线应至少两个数组。

qCurve(points, [color], [fill])
    用多个[x,y,x of control point,y of control point]设置路径的点,颜色,是否填充(默认为false||0不填充)如:
var arr=[];
arr[0]=[40,30,30,40];
arr[1]=[30,40,40,30];
arr[2]=[30,180,180,30];
arr[3]=[40,190,190,40];
arr[4]=[180,190,190,180];
arr[5]=[190,180,180,190];
arr[6]=[190,40,40,190];
arr[7]=[180,30,30,180];
jc.qCurve(arr,'#ffbbcc',true);

绘制贝塞尔曲线

绘制贝塞尔曲线,数组的点包含数组(x,y,x控制点1,y控制点1,x控制点2,y控制点2]。用于创建曲线应至少两个数组。

bCurve(points, [color], [fill])
    用多个 [x, y, x of control point 1, y of control point 1, x of control point 2, y of control point 2]设置路径的点,颜色,是否填充(默认为false||0不填充)如:
var arr=[];
arr[0]=[40,30,30,40,40,30];
arr[1]=[130,140,40,130,130,40];
arr[2]=[30,180,180,30,30,180];
jc.bCurve(arr,true);

绘制渐变

创建一个新的空白jCanvaScript ImageData对象与指定的尺寸。通过循环改变setPixel里面颜色的方式绘制渐变

var imgData=jc.imageData(100,100); //设置渐变区域的大小
for(var i=0;i<100;i++){
    for(var j=0;j<100;j++){
        imgData.setPixel(i,j,'rgba('+i+','+j+','+(i+j)+','+(i/100)+')'); 
        //绘制像素点i,j为像素点坐标
    }
}
imgData.putData(0,0); //设置渐变区域的位置

绘制图像

image(img, x, y, width, height, sX, sY, sWidth, sHeight);
    图像对象,x、y轴坐标,图像宽高,从图像X、Y位置选择宽高的图像,如:
var img=new Image();  //创建图像对象
img.src="logo.png";   //设置图像地址
img.onload=function(){  //加载图片(canvas绘制图像需要在图片加载结束后)
jc.start("can1");
jc.image(img,0,0);
jc.rect(50, 50, 24, 24, '#FF0000');
jc.image(img,140,140,48,48,50,50,24,24);  //将rect所选区域放大后绘制
jc.start("can1");}

绘制文字

text(text, x, y, [maxWidth], [color], [fill]);
    文字字符串,x、y轴坐标,文字显示最大宽度(如果超出会整体压缩文字),颜色,是否填充(默认为true||1不填充)如:
jc.text("Colored stroked text",80,140,80,'rgb(255,0,0)', 0);


  1. 以下绘图皆有此方法,只以此作为例子,后面不再反复写. ↩