标签归档:HTML5

HTML5 绘制图形之应用–ERP流程设置

HTML 绘图
应用场景:
目前需要采用html 制作流程设置,决定采用 html5的画图方式 (Chrome最新版)
1 html5基础知识了解
html5绘图是采用 标签 “Canvas” 例:< Canvas id="showDrawPic"  ><  /Canvas  >
html5绘图是采用坐标的方式定位,坐标原点在Canvas的左上角 X轴正向朝右,Y轴正向朝左
[Canvas]0————> X轴
|
|
|
|
|
Y轴
html5中Canvas 绘制的操作步骤
1 获取Canvas对象
var objId =document.getElementById(“showDrawPic”);
var objCanvas = objId.getContext(“2d”);
2 设置待绘制操作的属性 样式
3 调用绘制方法输入相关参数,进行绘制
所有的绘制对象的属性方法都在 “objCanvas”下
objCanvas下分为两大类方法
1 Stroke 画 主要是绘制轮廓 线条
2 Fill 填充 装满
例一 绘制矩形 绘制文本
方法 objCanvas.fillRect(x,y,width,height) objCanvas.strokeRect(x,y,width,height)
X —-坐标相对于canvas 起始位置
Y —-坐标相对于canvas起始位置
width 宽度
height 长度

—–示例代码
< html lang="en" >
< head >< /head >
< body >
< canvas id="showDrawPic" >< /canvas >
< /body >
< script language="javascript" type="text/javascript" >
drawRectOrText(‘showDrawPic’);
function drawRectOrText(id) {
var objId = document.getElementById(id);
if (objId == null)
return false;

var objCanvas = objId.getContext(‘2d’);
//绘制矩形
objCanvas.strokeStyle =”black”; //设置填充色
objCanvas.lineWidth=3; //设置绘制线的宽度
objCanvas.strokeRect(0,0,100,100);

//绘制字体
objCanvas.font=”30px Verdana”;
//渐变
var gradient=objCanvas.createLinearGradient(0,0,objId.width,0);
gradient.addColorStop(“0″,”magenta”);
gradient.addColorStop(“0.5″,”blue”);
gradient.addColorStop(“1.0″,”red”);
// 用渐变进行填充
objCanvas.strokeStyle=gradient;
objCanvas.strokeText(“maomao365.com “,10,130);

//clearRect(x,y,width,height); //清除绘制区域 
objCanvas.clearRect(0,0,100,100); //清除绘制区域

}
< /script >
< /html >
—–例二 绘制弧形
方法名 圆弧arc(x, y, radius, starAngle,endAngle, anticlockwise)
x:圆心的x坐标 y:圆心的y坐标 radius 半径
straAngle:开始角度 endAngle:结束角度
anticlockwise:是否逆时针(true)为逆时针,(false)为顺时针
示例代码:
< html lang="en" >
< head >< /head >
< body >
< canvas id="showDrawPic" >< /canvas >
< /body >
< script language="javascript" type="text/javascript" >
drawRectOrText(‘showDrawPic’);
function drawRectOrText(id) {
var objId = document.getElementById(id);
if (objId == null)
return false;

var objCanvas = objId.getContext(‘2d’);
//开始路径
objCanvas.beginPath();
objCanvas.arc(0,0,100,0,180, false);
objCanvas.closePath();
//将路径用画笔渲染
objCanvas.strokeStyle = ‘red’;
objCanvas.stroke();
//如果是填充路径 请采用 fill
}
< /script >
< /html >

———–示例三画线
绘制线段 moveTo(x,y) lineTo(x,y)
moveTo 移动当前画线点至x,y
lineTo 从当前画点 绘制线至 x,y
线绘制完毕后 就会形成绘线的路径 然后再进行stroke 就可以形成线条,如下例所示

html lang=”en” >
< head >< /head >
< body >
< canvas id="showDrawPic" >< /canvas >
< /body >
< script language="javascript" type="text/javascript" >
drawRectOrText(‘showDrawPic’);
function drawRectOrText(id) {
var objId = document.getElementById(id);
if (objId == null)
return false;

var objCanvas = objId.getContext(‘2d’);
objCanvas.moveTo(0,0);
objCanvas.lineTo(100,0);
objCanvas.strokeStyle = “blue”;
objCanvas.fillStyle = “blue”
objCanvas.stroke();

}
< /script >
< /html >

ERP中流程设置之应用