来源:自学PHP网 时间:2018-02-08 09:56 作者: 阅读:次
[导读] 在HTML5 canvas中,可以绘制的最简单的图形莫过于绘制一个矩形。在上面的例子中我们就绘制了两个矩形。它们分别是通过2D上下文的fillRect()方法和strokeRect()方法来实现的。...
不论你在 上绘制什么图形,有两个属性是你必须设置的:
填充属性和描边属性决定如何来绘制图形。stroke是图形的外轮廓边框。fill则是图形的填充颜色。 下面是一个简单的例子,在Canvas中绘制了一个蓝色边框和绿色填充的矩形(实际上这是两个矩形): 上面例子的实现代码如下: // 1. 等待页面DOM元素加载完毕 window.onload = function() { drawExamples(); } function drawExamples(){ // 2. 获取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上下文的 描边的宽度使用的是 在HTML5 canvas中,可以绘制的最简单的图形莫过于绘制一个矩形。在上面的例子中我们就绘制了两个矩形。它们分别是通过2D上下文的 绘制矩形的代码如下: 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);
请记住,canvas的坐标系统由canvas的左上角(0,0)坐标开始,然后X轴向右为正值方向,Y轴向下为正值方向。它的Y轴和正常的几何坐标系统是相反的。
var x = 10; var y = 10; var width = 100; var height = 100; context.fillRect(x, y, width, height); 下面是上面的代码所绘制的矩形: 上面的矩形是黑色的,是因为我们没有设置2D上下文的
var x = 10; var y = 10; var width = 100; var height = 100; context.strokeRect(x, y, width,height); 上面代码的返回结果如下: 同样,在我们没有设置2D上下文的 你可以使用2D上下文的 var x = 10; var y = 10; var width = 100; var height = 100; context.lineWidth = 4; context.strokeRect(x, y, width, height); 上面的代码的返回结果如下: 你可以使用2D上下文的 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); 上面的代码的返回结果如下: 2D上下文的 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); 上面代码的而返回结果如下: 注意观察上面的图形,红色和蓝色矩形分别被清除掉一部分。因为
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com