javascipt教程(javascipt如何自学)

导语：javascript自学记录：canvas绘图

由于学习js是为爬虫服务，所以canvas绘图学习并不完整。

第15章 使用Canvas绘图

15.1 基本用法

HTML文件中需要有canvas元素，两标签之间的文字是浏览器不支持时显示的。

<canvas id=&34; width=&34; height=&34;>A drawing of something.</canvas>

要在网页中显示canvas绘制的图像，只需要在画布上绘制图形即可：

var drawing = document.getElementById(&34;);if (drawing.getContext){ var context = drawing.getContext(&34;); context.fillStyle = &0000ff&34;rgba(0,0,255,0.5)&34;drawing&34;image/png&34;img&34;2d&34;red&34;34;;

设置属性有以下几种：

&34;&0000ff&34;rgba(0,0,255,0.5)&34;red&34;drawing&34;2d&34;34;; context.fillRect(10,10,50,50); // 半透明的矩形 context.fillStyle = &34;; context.fillRect(30,30,50,50);}

15.2.3 绘制路径

以beginPath()方法开始，然后接着绘制以下线条：

arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle 和endAngle。最后一个参数表示startAngle 和endAngle 是否按逆时针方向计算，值为false表示按顺时针方向计算。arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给定的半径radius 穿过(x1,y1)。bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：从上一点开始绘制一条曲线，到(x,y)为止，并且以(c1x,c1y)和(c2x,c2y)为控制点。lineTo(x, y)：从上一点开始绘制一条直线，到(x,y)为止。moveTo(x, y)：将绘图游标移动到(x,y)，不画线。quadraticCurveTo(cx, cy, x, y)：从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy)作为控制点。rect(x, y, width, height)：从点(x,y)开始绘制一个矩形，宽度和高度分别由width 和height 指定。这个方法绘制的是矩形路径，而不是strokeRect()和fillRect()所绘制的独立的形状。

路径创建完以后，有多种结尾方式：

closePath()会自动与起点连接；fill()会自动以fillStyle填充区域；stroke()会对线条描边；clip()创建一个剪切区域。15.2.4 绘制文本

方法：

fillText()strokeText()

属性：

fonttextAlign start、end、left、right、centertextBaseline top、hanging、middle、alphabetic、ideographic、bottom

//正常context.font = &34;;context.textAlign = &34;;context.textBaseline = &34;;context.fillText(&34;, 100, 20);//起点对齐context.textAlign = &34;;context.fi llText(&34;, 100, 40);//终点对齐context.textAlign = &34;;context.fi llText(&34;, 100, 60);

本文内容由小璎整理编辑！