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. 以下绘图皆有此方法，只以此作为例子，后面不再反复写. ↩