html5画布基础,html5画布基础

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建画布：

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

阴影：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.shadowBlur=10;----阴影的模糊级别

ctx.shadowOffsetX=20;----阴影偏移像素

ctx.shadowColor="black";---阴影

ctx.fillStyle="blue";

ctx.fillRect(20,20,100,80);

线条：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d"); ctx.beginPath();

ctx.lineWidth=10;----设置线条粗细

ctx.lineCap="round";---round(圆形的结束帽)/square(正方形结束帽)

ctx.moveTo(20,20);

ctx.lineTo(20,200);

ctx.stroke();

ctx.lineJoin="round";---当两条线条交汇时，创建边角类型(round-圆角/bevel-斜角/miter-尖角)

ctx.miterLimit=5;---设置或返回最大斜接长度。

矩形：

ctx.clearRect(20,20,100,50);---清空矩形

context.quadraticCurveTo(控制点x,控制点y,结束点x,结束点y);---二次贝塞尔曲线

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);---三次贝塞尔曲线