首页 > 代码库 > HTML5新标签<canvas>

HTML5新标签<canvas>

2024-08-15 09:49:13   221人阅读

基本用法

首先在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对路径描边时所使用的绘制风格
textAlignfillText()或strokeText()方法绘制的时候，所画文本的水平对齐方式
textBaselinefillText()或strokeText()方法绘制的时候，所画文本的水平对齐方式

HTML5新标签<canvas>


联系
我们