HTML5 学习手笔二:canvas API 绘制树形图案A

简介:

 上篇通过对canvas 画对角线,了解了一些canvas画图基本原理。现在可以利用HTML5 canvas API创建一个场景:带有长跑跑道的树林。

本篇大纲

 

  1. 用canvas API绘制树木的树冠
  2. 为树冠的边框架加粗并且填充树冠颜色
  3. 为树冠创造一个强大的树干
  4. 绘制跑道 

用canvas API绘制树木的树冠

原理还是与上篇画对角线一样,只是步骤增多而已,先看代码:

 

   <script type="text/javascript">
                 function createCanopyPath(context){
                  context.beginPath();
                  
                 context.moveTo(-25,-50);
                 context.lineTo(-10,-80);
                 context.lineTo(-20,-80);
                 context.lineTo(-5,-110);
                 context.lineTo(-15,-110);

                 context.lineTo(0,-140);

                 context.lineTo(15,-110);
                 context.lineTo(5,-110);
                 context.lineTo(20,-80);
                 context.lineTo(10,-80);
                 context.lineTo(25,-50);

                 context.closePath();
                }

         function drawTrails(){
                 var canvas=document.getElementById('diagonal');
                 var context=canvas.getContext('2d');
                
                context.save();
                context.translate(130,250);
                
                createCanopyPath(context);
                context.stroke();
                context.restore();
        }
 window.addEventListener("load",drawTrails, true);
        </script>

DEMO效果如下:

上面的代码中有一个特殊的函数叫做closePath。这个函数的行为同lineTo很像,唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形己经闭合或者形成了完全封闭的区域。

 

 为树冠的边框架加粗并且填充树冠颜色

 为了使树冠更加形象并且看起来像真的树,不得不利用canvas 的API绘制其图形外观,代码如下:

 

   function drawTrails(){
                 var canvas=document.getElementById('diagonal');
                 var context=canvas.getContext('2d');
                
                context.save();
                context.translate(130,250);
                
                createCanopyPath(context);
                 // 加宽线条
                context.lineWidth=4;
                 // 平滑路径的接合点
                context.lineJoin='round';
                 // 将颜色改成棕色
                context.strokeStyle='#663300';
                
                 // 将填充色设置为绿色并填充树冠
                context.fillStyle='#339900';
                context.fill();
        
                context.stroke();
                context.restore();
        }

 

 DEMO效果见下面运行效果:

lineJoin属性设置为round,这是修改当前形状中线段的连接方式,让拐角变得更加油;也可以把lineJoin属性设置成bevel或者miter来变换拐角样式。

strokeStyle属性是为了改变线条颜色。

fillStyle属性是为了设置填充颜色

context 的fill 函数是为了可以让canvas对当前图形中所有的闭合路径内部的像素点进行填充,配合fillStyle 填充内部像形点颜色。

 

 为树冠创造一个强大的树干

创建树干有两种方法

 

  1. 用我们上面学过的使用线条然后配合closePath画树干
  2. HTML5 提供了一个强大的填充矩形的函数 fillRect 可以画一块矩形x轴、y轴、需要画的宽度和高度即可 

 

在这里我们使用fillRect 来构建树干。代码如下:

 

 context.fillStyle='#663300';
                context.fillRect(-5,-50,10,50);

 

 效果DEMO如下:

  

与fillRect相关的函数还有:strokeRect和clearRect。strokeRect的作用是基于给出的位置和坐标画出矩形的轮廓,clearRect的作用是清除矩形区域内的所有内容并将它恢复到初始状态,即透明。

 

 

 绘制跑道 

 完成本篇最后一个功能,在小树旁边画上一个跑道。代码如下:

  function drawTrails(){
                 var canvas=document.getElementById('diagonal');
                 var context=canvas.getContext('2d');
                
                context.save();
                context.translate(130,250);
                
                createCanopyPath(context);
                 // 加宽线条
                context.lineWidth=4;
                 // 平滑路径的接合点
                context.lineJoin='round';
                 // 将颜色改成棕色
                context.strokeStyle='#663300';
                
                 // 将填充色设置为绿色并填充树冠
                context.fillStyle='#339900';
                context.fill();
                
                context.fillStyle='#663300';
                context.fillRect(-5,-50,10,50);
        
                context.stroke();
                context.restore();

                context.save();
                context.translate(-10,350);
                context.beginPath();
                context.moveTo(0,0);
                 // 第一条曲线向右上方弯曲
                context.quadraticCurveTo(170,-50,260,-190);
                 // 第二条曲线向右下方弯曲
                context.quadraticCurveTo(310,-250,410,-250);
                context.strokeStyle='#663300';
                context.lineWidth=20;
                context.stroke();
                context.restore();
        } 

quadraticCurveTo函数绘制曲线的起点是当前坐标,带有两组(x,y)参数。第二组是指曲线的终点。第一组代表控制点。所谓的控制点位于曲线的旁边,其作用相当于对曲线产生一个拉力。通过高速控制点的位置,就可以改变曲线的曲率。在右上方再画一条一样的曲线,以形成一条路。DEMO效果如下:

 

与quadraticCureTo函数一样的曲线功能还涉及:bezierCurveTo、arcTo和arc函数。这些函数通过多种控制点(如半径、角度和等)让曲线更具可塑性。

 

 本文转自 terry_龙 51CTO博客,原文链接:http://blog.51cto.com/terryblog/798910,如需转载请自行联系原作者

相关文章
|
1天前
|
存储 Java API
【JAVA学习之路 | 提高篇】[内部类与常见API]String类
【JAVA学习之路 | 提高篇】[内部类与常见API]String类
|
8天前
|
存储 安全 机器人
【LLM】智能学生顾问构建技术学习(Lyrz SDK + OpenAI API )
【5月更文挑战第13天】智能学生顾问构建技术学习(Lyrz SDK + OpenAI API )
24 1
|
8天前
|
Kubernetes 安全 API
Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
|
8天前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
16 4
|
8天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
8天前
|
移动开发 API UED
【专栏:HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计,使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者,可创建图片排序、手势识别等交互功能,但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具,能提升用户体验,推动网页交互设计创新。
|
8天前
|
缓存 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义绘制与Canvas API
【4月更文挑战第30天】Flutter允许开发者通过`CustomPaint`和`CustomPainter`进行自定义绘制,以实现丰富视觉效果。`CustomPaint` widget将`CustomPainter`应用到画布,而`CustomPainter`需实现`paint`和`shouldRepaint`方法。`paint`用于绘制图形,如示例中创建的`MyCirclePainter`绘制蓝色圆圈。Canvas API提供绘制形状、路径、文本和图片等功能。注意性能优化,避免不必要的重绘和利用缓存提升效率。自定义绘制让Flutter UI更具灵活性和个性化,但也需要图形学知识和性能意识。
【Flutter前端技术开发专栏】Flutter中的自定义绘制与Canvas API
|
前端开发 数据安全/隐私保护
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
179 0
|
移动开发 前端开发 HTML5
HTML5学习-表格标签
HTML5学习-表格标签
|
移动开发 Java HTML5
HTML5 学习7.表格标签
HTML5 学习7.表格标签

热门文章

最新文章