不管你在HTML5 您必须设置canvas上绘制的图形有两个属性:
-
描边属性-stroke
-
填充属性-fill
填充属性和描边属性决定了如何绘制图形。stroke是图形的外轮廓边框。fill是图形的填充颜色。
以下是一个简单的例子,在Canvas中画出蓝色边框和绿色填充矩形(实际上是两个矩形):
您的浏览器不支持HTML5 Canvas!
上述例子的实现代码如下:
// 1. 等待页面DOM元素加载完毕 window.onload = function() { drawExamples(); } function drawExamples(){ // 2. 引用canvas元素获取canvas元素 var canvas = document.getElementById(ex1); // 3. 从canvas元素中获取2D元素 context var context = canvas.getContext("2d"); // 4. 绘制图形 context.fillStyle = "#009900"; context.fillRect(10,10, 100,100); context.strokeStyle = "#0000ff"; context.lineWidth = 5; context.strokeRect(10,10, 100,100); }
请注意,上述填充样式和描边样式分别设置。分别使用2D上下文strokeStyle
和fillStyle
属性。
使用了描边的宽度lineWidth
属性,lineWidth
设置为5个表示矩形的外框的线宽为5个单位。
绘制矩形
在HTML5 在canvas中,最简单的图形是画一个矩形。在上面的例子中,我们画了两个矩形。它们分别通过2D上下文fillRect()
方法和strokeRect()
实现方法。
画矩形的代码如下:
var canvas = document.getElementById(ex1); var context = canvas.getContext("2d"); context.fillStyle = "#ff0000"; context.fillRect(10,10, 100,100); context.strokeStyle = "#0000ff"; context.strokeRect(30,20, 120,110);
您的浏览器不支持HTML5 Canvas!
fillRect()
fillRect()
该方法用于绘制填充颜色的矩形。它是由x
和y
属性决定了矩形左上角的位置,width
和height
决定矩形的宽度和高度。
请记住,canvas坐标系统从canvas左上角(0,0)坐标开始,然后X轴向右为正值方向,Y轴向下为正值方向。其Y轴与正常的几何坐标系统相反。
x
、y
、width
和height
四个变量作为参数传入fillRect()
用于确定如何绘制矩形。以下是一个例子:
var x = 10; var y = 10; var width = 100; var height = 100; context.fillRect(x, y, width, height);
以下是上述代码绘制的矩形:
您的浏览器不支持HTML5 Canvas!
上面的矩形是黑色的,因为我们没有设置2D上下文fillStyle
属性,其默认颜色为黑色。
strokeRect()
strokeRect()
该方法用于绘制无填充色的描边矩形。同样,它也是由x
和y
属性决定了矩形左上角的位置,width
和height
实现决定矩形的宽度和高度。灭火就是一个例子:
var x = 10; var y = 10; var width = 100; var height = 100; context.strokeRect(x, y, width,height);
上述代码的返回结果如下:
您的浏览器不支持HTML5 Canvas!
同样,我们没有设置2D上下文strokeStyle
在属性的情况下,描边色为黑色。
您可以使用2D上下文lineWidth
设置描边宽度的属性。例如,以下示例:
var x = 10; var y = 10; var width = 100; var height = 100; context.lineWidth = 4; context.strokeRect(x, y, width, height);
上述代码的返回结果如下:
您的浏览器不支持HTML5 Canvas!
矩形的颜色
您可以使用2D上下文fillStyle
和strokeStyle
设置绘制矩形的颜色。例如,以下示例:
var canvas = document.getElementById(ex1); var context = canvas.getContext("2d"); context.fillStyle = "#f2784b"; context.fillRect(10,10, 100,100); context.lineWidth = 4; context.strokeStyle = "#049372"; context.strokeRect(30,20, 120,110);
上述代码的返回结果如下:
您的浏览器不支持HTML5 Canvas!
clearRect()
2D上下文的clearRect()
函数用于在Canvas中清除矩形区域。被清除的矩形区域变得透明。以下是一个例子:
var canvas = document.getElementById(ex1); var context = canvas.getContext("2d"); context.fillStyle = "#ff0000"; context.fillRect(10,10, 100,100); context.strokeStyle = "#0000ff"; context.strokeRect(30,20, 120, 110); context.clearRect(50, 30, 110, 35);
上述代码的返回结果如下:
您的浏览器不支持HTML5 Canvas!
注意观察上面的图形。红色和蓝色矩形分别被去除。因为clearRect()
canvas元素会使矩形区域透明,而canvas元素位于其他元素上,因此这些canvas元素可以通过透明区域看到。
clearRect()
四个参数也可以像矩形一样传入:clearRect(x, y, width, height)
。这四个参数的意义与矩形的描述相同。
返回HTML5 Canvas教程目录
相关阅读
-
MDN Drawing shapes with canvas
-
MDN Applying styles and colors