Java学院完成JavaScript的Canvas_ power节点

Canvas是HTML5的新组件。它就像一个幕布，上面可以用JavaScript绘制各种图表和动画。

在没有Canvas的时代，绘图只能用Flash插件实现，页面还得用JavaScript和Flash交互。有了Canvas，我们不再需要Flash了，只需要用JavaScript来完成绘图。

画布定义了一个具有指定大小的矩形框，我们可以在其中随意绘制：

Canvas id=' test-Canvas ' width=' 300 ' height=' 200 '/Canvas由于浏览器对HTML5标准的支持不一致，所以通常会在Canvas内部添加一些描述性的HTML代码。如果浏览器支持画布，则忽略画布内部的HTML，如果浏览器不支持画布，则显示画布内部的HTML:

Canvas id=' test-stock ' width=' 300 ' height=' 200 ' p当前价格： 25.51/p/Canvas使用Canvas之前，请使用canvas.getContext测试浏览器是否支持Canvas:

！- HTML代码-Canvas id=' test-Canvas ' width=' 200 ' heigth=' 100 ' p您的浏览器不支持Canvas/p/Canvas ' use strict '；var canvas=document . getelementbyid(' test-canvas ')；If (Canvas.getContext) {alert('您的浏览器支持Canvas！' );} else {alert('您的浏览器不支持Canvas！' );}getContext('2d ')方法让我们获得一个CanvasRenderingContext2D对象，通过这个对象需要完成所有的绘图操作。

var CTX=canvas . getcontext(' 2d ')；需要画3D怎么办？HTML5还有一个WebGL规范，允许在Canvas中绘制3D图形：

GL=canvas . GetContext(' web GL ')；在本节中，我们只关注绘制2D图形。

绘制形状

我们可以在画布上画出各种形状。在绘图之前，我们需要知道Canvas的坐标系：

Canvas的坐标以左上角为原点，水平右为X轴，垂直下为Y轴，以像素为单位，所以每个点都是非负整数。

CanvasRenderingContext2D对象有几种绘制图形的方法：

使用“严格”；var canvas=document . getelementbyid(' test-shape-canvas ')，CTX=canvas . getcontext(' 2d ')；ctx.clearRect(0，0，200，200)；//擦除(0，0)位置大小为200x200的矩形，表示将区域改为透明ctx.fillStyle=' # dddddd//设置颜色ctx.fillRect(10，10，130，130)；//在(10，10)位置给大小为130x130的矩形上色//使用Path绘制复杂的Path : var Path=new Path 2d()；path.arc(75，75，50，0，数学。PI*2，真)；path.moveTo(110，75)；path.arc(75，75，35，0，数学。PI，假)；path.moveTo(65，65)；path.arc(60，65，5，0，数学。PI*2，真)；path.moveTo(95，65)；path.arc(90，65，5，0，数学。PI*2，真)；ctx.strokeStyle=' # 0000ffctx.stroke(路径)；绘制文本

绘制文字是在指定位置输出文字，可以设置字体、样式、阴影等。这与CSS完全一致：

使用“严格”；var canvas=document . getelementbyid(' test-text-canvas ')，CTX=canvas . getcontext(' 2d ')；ctx.clearRect(0，0，canvas.width，canvas . height)；CTX . shadowoffsetx=2；CTX . shadowoffsety=2；CTX . shadow blur=2；ctx.shadowColor=' # 666666ctx.font=' 24px Arialctx.fillStyle=' # 333333Ctx.fillText('阴影文字'，20，40)；Canvas不仅可以绘制基本的形状和文本，还可以实现动画、缩放、各种滤镜和像素转换等高级操作。如果您想要实现非常复杂的操作，请考虑以下优化方案：

通过创建一个不可见的画布进行绘制，然后将最终的绘制结果复制到页面的可见画布上；尽量用整数坐标代替浮点数；您可以创建多个重叠的画布来绘制不同的层，而不是在一个画布中绘制非常复杂的图表；如果背景图片不变，可以直接用img标注，放在底部。