2D上下文

使用2D上下文提供的方法可以绘制简单的2D图形,如矩形,弧线和路径;

2D上下文的坐标开始域<canvas>元素的左上角,原点坐标为(0,0)

后续所有操作的计算都基于原点,x越大表示越靠右,y越大表示越靠下

此外<canvas>的width,height属性表示水平和垂直方向上可用像素点的数目

填充和描边

2D上下文的两种基本绘图操作是填充和描边.

填充就是用指定等样式(颜色,渐变,图像)填充目标图形

描边就是指在图形的边缘划线.

大多数的2D上下文的操作都会细分为填充和描边两个操作

而操作的结果取决于两个属性: fillStyle 和 strokeStyle

这两个属性的值可以是字符串,渐变对象或模式对象

并且它们的默认值都是 "#000000"

对于该值可以使用CSS中指定颜色的任何格式,包括颜色名,十六进制码.rgb,rgba,hsl或者hsla

以下方代码为例:

var drawing = document.getElementById("drawing");

// 验证浏览器对<canvas>的支持

if(drawing.getContext){

    var context = drawing.getContext("2d");

    context.strokeStyle = "red";

    context.fillStyle = "#0000ff";

}

上述代码将 描边的颜色设置为红色,将填充的颜色设置为蓝色(#0000ff)