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()方法绘制的时候,所画文本的水平对齐方式 |