HTML知识点总结——canvas绘制矩形

HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。

canvas提供了三种方法绘制矩形：
①、绘制一个填充的矩形：fillRect(x, y, width, height)
②、绘制一个矩形的边框：strokeRect(x, y, width, height)
③、清除指定矩形区域，让清除部分完全透明：clearRect(x, y, width, height)

上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。

1、矩形（Rectangular）例子

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}

运行结果：

2、strokeRect时，边框像素渲染问题
按理渲染出的边框应该是1px的，canvas在渲染矩形边框时，边框宽度是平均分在偏移位置的两侧。context.strokeRect(10,10,50,50)，边框会渲染在10.5 和 9.5之间,浏览器是不会让一个像素只用自己的一半的，相当于边框会渲染在9到11之间，
context.strokeRect(10.5,10.5,50,50)，边框会渲染在10到11之间

3、添加样式和颜色
fillStyle：设置图形的填充颜色。
strokeStyle：设置图形轮廓的颜色。
默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）
lineWidth : 这个属性设置当前绘线的粗细。属性值必须为正数。描述线段宽度的数字。 0、负数、 Infinity 和 NaN 会被忽略。默认值是1.0。

4、lineJoin
设定线条与线条间接合处的样式（默认是 miter）
round : 圆角
bevel : 斜角
miter : 直角

HTML知识点总结——canvas绘制矩形

猜你喜欢