javascript 绘图框架 js canvas 画图

转载

mob64ca13ff9303 2024-02-19 11:51:40

文章标签 javascript 绘图框架 canvas 2d html5 数组 文章分类 JavaScript 前端开发

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);