jCanvaScript canvas的操作库

在jcscript.com上下载最新的jCanvaScript.1.5.18.min.js文件  里面有很多关于canvas的方法都已经是封装好了的，只需直接调用，但是要注意调用之前和调用之后都要写：jc.start("XXX");//括号里的表示画布的id。

<script type="text/javascript" src="jCancaScript.1.5.18.min.js"></script>

<script>

var oInput=document.getElmentById("input1");

var oc=document.getElmentById("c1");

var ogc=oc.getContext("2d");

//开始

jc.start("c1");//代表：只是指定id为c1的画布 只绘制了一次 ，只能进行一次操作

//jc.start("c1",true);//第二个参数代表可以重绘，可以进行多个操作

//jc.rect(100,100,50,50);带边框的正方形 默认

//jc.rect(100,100,50,50,1);带边框的正方形  bool为1或者true时 ： 整个正方形是填充的

//jc.rect(100,100,50,50,"#ff0000",1);填充色是红色

 

//下面画个圆形

jc.circle(100,100,50,"#ff0000",1);

 

接下来 给这个圆形加个点击事件【以下代码运行无效 木有点击事件产生  原因：红色代码】

jc.circle(100,100,50,"#ff0000",1).click(function(){

alert(123);

});

 

//在画布中间对画出的圆进行任意方向的拖拽

jc.circle(100,100,50,"#ff0000",1).draggable();

 

//在画布外面添加一个按钮点击改变图形的颜色，请看蓝色代码

jc.circle(100,100,50,"#ff0000",1).id("c1");//id是针对单个，name可以针对一组

//结束

jc.start("c1");

 

oInput.οnclick=function(){

jc("#c1").color("#ffff00");

//jc("#c1").color("#ffff00").animate({x:200,y:200,radius:5},2000);//从坐标为100,100半径为50的

//大圆慢慢匀速缩小到坐标为200,200半径为5的小圆，总共耗时2秒.

}

</script>

 

<canvas id="c1" style="width:400px;height:400px;background:blue"></canvas>

<input type="button" value="点击" id="input1" />

转载于:https://www.cnblogs.com/lunawzh/p/5204486.html