canvas基础1

一、canvas 是 HTML5 提供的画画本

// 创建 <canvas> 元素时至少要设置其 width 和 height 属性，这样才能告诉浏览器在大面积上绘图。

// 出现在开始和结束标签之间的内容是后备数据，会在浏览器不支持 <canvas> 元素时显示。

<canvas id="drawing" width="200" height="200">
    你的浏览器不支持HTML5
</canvas>
    
// 要在画布上绘制图形，首先要取得绘图上下文，getContext() 方法可以获取对绘图上下文的引用。（2
    d 代表平面图形）
    
    
<script>  
let drawing = document.getElementById("drawing");
         
// 确保浏览器支持<canvas>
if (drawing.getContext) {
         
  let context = drawing.getContext("2d");
  
  // 其他代码
}
</script>

二、填充和描边

// 2d上下文的坐标原点（0，0）在 <canvas>元素的左上角。
// 所有坐标值都相对于该点计算，因此 x 坐标向右增长，y 坐标向下增长。

// 2d上下文有两个基本绘制操作：填充和描边。
// 填充以指定样式（颜色、渐变或图像）自动填充形状，而描边只为图形边界着色。
// 填充样式	-- fillStyle
// 描边样式 -- strokeStyle


let drawing = document.getElementById("drawing");
         
// 确保浏览器支持<canvas>
if (drawing.getContext) {
         
  let context = drawing.getContext("2d");
  context.strokeStyle = "red";
  context.fillStyle = "#0000ff";
}

三、绘制矩形

// 矩形是唯一一个可以可以直接在 2d 绘图上下文中绘制的形状。
// 与绘制矩形相关的方法有3个：fillRect()、strokeRect()和clearRect()。
// 四个参数（x坐标、y坐标、宽度、高度)


let drawing = document.getElementById("drawing");
         
// 确保浏览器支持<canvas>
if (drawing.getContext) {
  let context = drawing.getContext("2d");

         
  // 画一个红色矩形
  context.fillStyle = "#ff0000";
  context.fillRect(10, 10, 50, 50);
         
  // 画一个半透明的蓝色矩形
  context.fillStyle = "rgba(0,0,255,0.5)";
  context.fillRect(30, 30, 50, 50);
}

// 浏览器输出如下

绘制矩形1 canvas01.png

// strokeRect() 方法使用通过 strokeStyle 的属性指定的颜色绘制矩形轮廓。

let drawing = document.getElementById("drawing");
         
// 确保浏览器支持<canvas>
if (drawing.getContext) {
  let context = drawing.getContext("2d");

         
  // 画一个红色轮廓的矩形
  context.strokeStyle = "#ff0000";
  context.strokeRect(10, 10, 50, 50);
         
  // 画一个半透明的蓝色轮廓的矩形
  context.strokeStyle = "rgba(0,0,255,0.5)";
  context.strokeRect(30, 30, 50, 50);
}

// 浏览器输出如下

绘制矩形2 canvas02.png

// 使用 clearRect() 方法可以擦除画布中某个区域。
// 该方法用于把绘图上下文中来的某个区域变透明。

let drawing = document.getElementById("drawing");
         
// 确保浏览器支持<canvas>
if (drawing.getContext) {
  let context = drawing.getContext("2d");
         
  // 画一个红色矩形
  context.fillStyle = "#ff0000";
  context.fillRect(10, 10, 50, 50);
         
  // 画一个半透明的蓝色矩形
  context.fillStyle = "rgba(0,0,255,0.5)";
  context.fillRect(30, 30, 50, 50);
         
  // 清除与前面两个矩形重叠的一个小矩形
  context.clearRect(40, 40, 10, 10);
}

// 浏览器输出如下

绘制矩形3 canvas03.png

博文查考

JavaScript 高级程序设计（第4版） --【美】马特.弗里斯比著