Html5 Canvas笔记(2)-Canvas绘图

用Canvas API绘图,需要画图形的边线并设置内部区域填充,边线英文语法对应stroke,填充对应fill,在后面我们会频繁看到这2个英文单词的出现。Canvas API内置的形状绘图函数比较少,可以完成绘制矩形Rect、弧形Arc,也可以画贝塞尔曲线bezierCurver、quadraticCurve。下面我们一个一个的来说。

画线-Line

 function drawScreen(){
context.strokeStyle='black';
context.lineWidth=10;
context.lineCap='square';
context.beginPath(); //开始绘制路径
context.moveTo(20,0);
context.lineTo(100,0);
context.closePath(); //结束绘制路径
}

lineCap属性:用于定义线条、路径、边框线端点。

butt:默认值,端点是垂直于线段边缘的平直边缘;
round:端点是在线段边缘处以线宽为直径的半圆;
square:端点是在线段边缘处以线宽为长、以一半线宽为宽的矩形;

lineJoin属性:定义两条线相交产生的拐角。

miter:默认值,在连接处边缘延长相接;
bevel:连接处是一个对角线斜角;
round:连接处是一个圆;

lineWidth属性:线宽,默认值为1.0。

strokeStyle属性:定义线和形状边框的颜色和样式。

矩形-Rect

 function drawScreen(){
context.fillStyle='#000000'; //设置图形填充样式
context.strokeStyle='#ff00ff'; //设置图形线框样式
context.lineWidth=; //指定线宽
context.fillRect(,,,); //填充矩形区域
context.strokeRect(,,,); //描绘矩形边框
context.clearRect(,,,); //清空矩形区域
}

fillRect(x,y,width,height):在位置(x,y)绘制宽width,高height的填充矩形

strokeRect(x,y,width,height):在位置(x,y)绘制宽width,高height的矩形外框

clearRect(x,y,width,height):从位置(x,y)开始清除宽width,高height的矩形区域,使其透明

注:一定要注意大小写的区别,javascript中是区分大小写的,一旦代码中输入的属性名、方法名或变量名等大小写输入错误,会导致运行错误;

弧线-Arc

 function drawScreen(){
context.beginPath();
context.strokeStyle="black";
context.lineWidth=5;
context.arc(100,100,20,0,(Math.PI/180)*270,false);
context.stroke(); context.moveTo(0,0);
context.lineTo(100,200);
context.arcTo(350,350,100,100,20);
context.closePath();
}

arc(x,y,radius,startAngle,endAngle,anticlockwise):

(x,y):圆心坐标;
radius:圆弧半径;
anticlockwise:画圆弧的方向,true表示逆时针,false表示顺时针;
startAngle,endAngle:圆弧的起始角度与结束角度;

arcTo(x1,y1,x2,y2,radius):

(x1,y1):圆弧的起点位置坐标;
(x2,y2):圆弧结束位置坐标;

贝塞尔曲线-bezierCurver、quadraticCurve

bezierCurver:链接到W3C相应内容

quadraticCurve:链接到W3C相应内容

上一篇:thinkpad e450 win7黑苹果macos 10.10.5(网/显/声卡驱动)安装成功


下一篇:[MAC]用beamoff给VMware的Mac OS X 10.10.x加速