**创建canvas**
在html文件:
<canvas id=canvas></canvas>
canves属性:width、height、getContext('2d') 绘图环境
不建议通过css方式指定canvs的大小
canvas的width和height属性不光是指定了canvas的像素尺寸,还指定了其内里图片的精度
1 给 canvas 指定大小时,尽量不要使用 CSS 样式,直接定义 canvas 的 width 和 height 属性(设置时没有单位):
<canvas id="canvas" width="1024" height="768"></canvas>
(当不设置 width 和 height 时,默认 width 为 300px,height 为 150px)
</canvas>
2 在 js 中需要两步初始化操作:
(1)var canvas = document.getElementById("canvas");//获取 canvas
(2)var context = canvas.getContext("2d");//得到绘图上下文环境,从而使
用 canvas 进行绘制
3 设置 canvas 的大小:
canvas.width = 1024;canvas.height = 768;
代码:
<canvas id="canvas" width="1024" height="768" style="border:1px solid #ccc;display:block;margin:20px auto;">
游览器不支持canvas的处理方式:
if(canvas.getContext("2d")){
var context = canvas.getContext("2d");
}else{
alert("当前游览器不支持canvas,请更换游览器调试");
}
a.使用canvas绘制直线:先设置绘制的状态 再画出线条
context.moveTo(100,100);//moveto是起始点
context.lineTo(700,700);//lineto是划线的点
context.lineWidth=5 //线条宽度
context.strokeStyle="red";//线条颜色
context.stroke();//stroke是笔画的意思,所以画的都是直线
context.fillStyle="green";//填充颜色
context.fill();//进行填充
b.矩形绘制:
cxt.rect(x,y,width,height)//规划矩形路径
cxt.fillRect(x,y,width,height)//绘制
cxt.strokeRect(x,y,width,height)//填充
rect(x,y,width,height)
颜色赋值:
fillstyle strokestyle(css支持的颜色,canvas都支持)
#ffffff;
#642
rgb(255,128,0)
rgba(100,100,100m0.8);
hsl(20,62%,28%);
hsla(40,82%,33%,0.6);
red
小结:
var context = canves.getContext('2d')
context设置属性
moveTo(x,y);lineTo(x,y);
beginPath closePath开始路径的开始以及结束
lineWidth
strokeStyle设置线条的样式
fillStyle设置填充样式
stroke
fill
rect(x,y,宽,高)
注意:
1.beginPath和colsePath成对出现时可以构成一个封闭图形
2.既有填充又有描边是先填充在描边,否则描边会被覆盖掉一半的宽度
比较好的代码书写顺序:
1、绘制图形的途径
2、绘制图形状态
3、绘制
线条属性:
1、lineCap 设置画布线条两端样式:
butt(default)
round
square
*绘制一个五角星:
var context = canvas.getContext("2d");
context.width = 800;
context.height = 800;
context.lineWidth = 10;
context.strokeStyle = "#efe0ce";
context.fillStyle = "rbg(255,0,0)";
context.fill();
drawStar(context,150,300,400,400,0,5,15);
// 多边形复用Star
// drawStar(cxt,r,R,x,y,rot,pol,angelStart)
// drawStar(context(绘图环境)、内圆半径、外圆半径、Star的X轴偏移量、Star的y轴偏移量、Star旋转度数(顺时针)、几边形、Star旋转度数(逆时针))
function drawStar(cxt,r,R,x,y,rot,pol,angelStart){
cxt.beginPath();
for (var i=0;i<pol;i++){
cxt.lineTo(x+R*Math.cos((angelStart+(360/pol)*i-rot)/180*Math.PI)
,y-R*Math.sin((angelStart+(360/pol)*i-rot)/180*Math.PI));
cxt.lineTo(x+r*Math.cos((angelStart+360/(pol*2)+(360/pol)*i-rot)/180*Math.PI)
,y-r*Math.sin((angelStart+360/(pol*2)+(360/pol)*i-rot)/180*Math.PI));
}
cxt.closePath();
cxt.stroke();
}
lineJoin 相交的效果
默认:miter 尖角、 bevel 斜接、 round 圆角.
miterLimit 当lineJoin属性为miter时 内角距离的最大值(线条实线的尖角和宽度外的线相夹角),超过的话将使用bevel.默认为10.
2.填充样式:
fillStyle除了可以设置颜色,还可以设置渐变(线性渐变和径向渐变)。
线性渐变:
//两个坐标构成一个线段,即渐变线(用于定义渐变的方向和尺度)
step1: var grd = context.createLinearGradient( xstart, ystart, xend, yend );
//渐变线上的关键色(参数stop是一个浮点值,决定关键色的位置;参数color决定关键色的颜色)
step2: grd.addColorStop( stop, color );
径向渐变:
step1: var grd = context.createRadialGradient( x0, y0, r0, x1, y1, r1 );
step2: grd.addColorStop( stop, color );
图片填充:
createPattern( img, repeat-style );
画布填充:
createPattern( canvas, repeat-style );
视频背景填充:
createPattern( vedio, repeat-style );
小结:
fillStyle=color、gradient(渐变色((createLinearGradient) (createRadialGradient)+addColorStop(stop,color))、((image(var img=new Image() img.src=路径)、canvas(注意创建的新节点createElement("")、return 节点)、video)+createPattern(以上类型,repeat/repeat-x/y))
曲线绘制:
1、弧形路劲绘制
context.beginPath();
context.arc(
centerX,centerY,radius, //圆心坐标和半径
startingAngle,endingAngle, //起始弧度值结束弧度值
anticlockwise = false //绘制方向, false顺时针,true逆时针
); //这个同样只是路劲的绘制
context.stroke(); // 线圆弧 这里的绘制没有context.closePath();表示绘制弧形首尾不用线段连接
context.fillStyle = "#005588"; //设置填充颜色
context.fill(); //根据路劲和设置的颜色进行填充,填充的话会自动把路劲首位相连然后填充
context.arcTo( x1, y1, x2, y2, radius );
绘制起点是( x0, y0 ),但是( x0, y0 )不一定是切点,arcTo 方法在( x0, y0 )( x1, y1 )和( x1, y1 )( x2, y2 )两条线段上寻找切点,绘制圆弧(圆弧终止于( x1, y1 )( x2, y2 )这条线段的切点),而且,( x2, y2 )不一定是所绘制圆弧的终点,只是作为辅助线的结束位置,其中( x0, y0 )是上一个点的位置。
2、曲线绘制:(http://tinyurl.com/html5bezier)
二次贝塞尔曲线 QuadraticCurveTo :
context.moveTo( x0, y0 ); //指定初始点
context.quadraticCurveTo( x1, y1, x2, y2 ); //指定控制点(x1, y1)和终止点(x2, y2)
贝塞尔三次曲线 BezierCurveTo
context.moveTo( x0, y0 );
context.bezierCurveTo( x1, y1, x2, y2, x3, y3 );
小结:
三种曲线绘制方法
1、arc/arcto:绘制圆弧
2、quadraticCurveTo:一个控制点
3、bezeirCurveTo:两个控制点
beginpath 代表开始一个新路径
closepath 是结束当前路径,如果图形不是封闭的他就会封闭图形,解决办法是不使用closepath
3、文字的渲染:
context.font="样式 字号 字体";
context.fillText("书写的文字",文字的x,文字的y);
context.strokeText("",x,y,最长宽度:单位为像素)
context.strokeText( string, x, y, [maxlen] ); //用于绘制一行文字,同时给这行文字添加外边框
font-style: normal(默认)/italic(斜体字)/oblique(倾斜字体)
font-variant:normal(默认)/small-caps(只要在使用英文小写字母时才能看出区别,以一种小型的大写字母形式显示小写字母)
font-weight:lighter/normal(默认)/bold/bolder,,也可以使用数字设置:100,200,300,400(默认),500,600,700(bold),800,900
font-size:px(默认,如20px)/em(如2em)/百分比%(如150%),也可以使用以下属性值进行设置:xx-small, x-small, medium, large, x-large, xx-large
font-family:可以设置多种字体备选;支持@font-face;web安全字体
文字垂直对齐
是根据context.fillText(string,x,y)中的y值进行上对齐、下对齐或居中的。
后面三个分别表示拉丁文的垂直方向基准线、日语中文等方块字的垂直方向基准线、印度文的垂直方向基准线。
水平对齐
context.textAlign = left/middle/right
是根据context.fillText(string,x,y)中的x值进行左对齐、右对齐或居中的。
文本的度量:
context.measureText( string ).width;