HTML5新标签<canvas>

基本用法

首先在body中写个<canvas>，设定大小，个人建议大小要在行内设置，不然在部分情况下会发生错误。

CSS部分

给canvas加个边框，这边框只是为了方便看出canvas的边界，加不加都可以。

<style type="text/css">
canvas{
    border:1px solid #000;
}
</style>

HTML部分

<canvas id="canvas" width="500" height="500"></canvas>

JSt部分

canvas是一个画布，要操作它，需要使用javascript，所以我们要在javascript中获取它

var canvas = document.getElementById('canvas');

然后设置画画的环境，canvas是一个功能很强大的标签，这里我先简述下2d环境下的

var context = canvas.getContext('2d');

上述设置都做好后，就可以在画布上画东西了，例：

画一条线

context.lineWidth = 4;//设置画笔粗细
context.strokeStyle = 'red';//设置画笔颜色

context.beginPath();//开始路径
context.moveTo(100,100);//落笔点（100,100）
context.lineTo(100,200);//移动到（100,200）点上
context.closePath()//结束路径
context.stroke();//上色

结果如图：

closePath()方法有闭合路径的功能，也就是说不管最后一个点在哪，它都会自动生成一条线条将第一个点与最后一个点连接起来，上述例子由于是线条，看出不来，这个功能画几何图形的时候能给你带来些许便利，例：

context.beginPath();//开始路径
context.moveTo(100,100);
context.lineTo(100,200);
context.lineTo(200,200);
context.closePath()//结束路径
context.stroke();

效果如图：

 

<canvas> 2d环境量的绘制图形属性

属性	简介
canvas	指向绘图环境所属的canvas对象
fillstyle	指定该绘图环境在后续的图形填充操作中所使用的颜色，渐变色或方案
font	设定在调用绘图环境对象的fillText()或strokeText()方法时，所使用的字型
globalAlpha	指定全局透明度，取值范围0~1
globalCompsiteOperation	将某个物体绘制在其他的物体之上时采用的绘制方式，取值范围source-atop, source-in, source-out, source-over, destination-top, destination-in, destination-out, destination-over, lighter, copy, xor
lineCap	该值告诉浏览器如何绘制线段的端点，取值范围butt, round, square
lineWidth	线条的宽度
lineJoin	线条绘制交叉的时候的绘制方式，bevel, round, miter
miterLimit	如何绘制miter形式的线段焦点
shadowBlur	延伸的阴影效果，取值为非负的无穷量的double值，该值为高斯模糊方程式中的参数值
shadowColor	阴影的颜色值
shadowOffsetX	阴影效果的水平方向偏移量
shadowOffsetY	阴影效果的垂直方向偏移量
strokeStyle	对路径描边时所使用的绘制风格
textAlign	fillText()或strokeText()方法绘制的时候，所画文本的水平对齐方式
textBaseline	fillText()或strokeText()方法绘制的时候，所画文本的水平对齐方式

转载于:https://www.cnblogs.com/n-b-s-p/p/5925647.html