美文网首页
初识Canvas

初识Canvas

作者: 诺奕 | 来源:发表于2016-12-13 23:56 被阅读84次

canvas元素(标签)是HTML5中新增的一个重要元素,它被用来专门绘制图形(当然和以前的svg、vml是有区别的)。
在页面上放置一个canvas元素,就相当于在页面上放置了一块“画布”,可以在其中描绘图形。
但是,在canvas元素里进行绘画,并不是指用鼠标进行作画。事实上,canvas元素只是一块无色透明区域。需要利用JavaScript编写在其中的绘画脚本。
现在我们简单的在canvas绘制一个三角形:

首先我们在页面(html)中添加一个canvas元素,可利用其自有属性设置宽高
  //设置一个宽度为800px,高度为600px的画布
  <canvas width="800" height="600" id="c1"></canvas>

为了在页面中更好的区分,我们来设置下style样式吧

//将页面背景设成黑色
body{ background-color: #000;}
//将画布背景设成白色,以便我们更好的进行区分
canvas{ background-color: #fff;}
接下来重点来了,我们利用js来操作它
document.addEventListener('DOMContentLoaded',function(){    
    //我们用getId方法获取页面中的canvas元素(我们要画画是不是得有一张纸) 
    var oC = document.getElementById('c1');   
   //定义一支画笔或称上下文(我们要画画是不是得有一支笔)    
    var gd = oC.getContext('2d');  
    //定义画笔颜色(我们要画画是不是得选取我们使用什么颜色的笔)    
    gd.strokeStyle = 'red';   
   //定义画笔粗细 (我们要画画是不是得选取我们使用类型的笔,钢笔?毛笔?铅笔?等等吧)    
    gd.lineWidth = 20;  
    //定义一个起始点(也就是下笔点的X坐标,y左边),注意坐标原点位于整个画布的左上角那个点
    gd.moveTo(329,329); 
    //第二个点 
    gd.lineTo(503,167);   
    //第三个点
    gd.lineTo(597,405);  
    //再将画笔连到开始点(若不连则不会自动闭合,后面我们会说如何自动将首尾闭合)  
   gd.lineTo(329,329); 
   //描边(画完后我们得描边,要不然我们做的选区)  
   gd.stroke();
},false);

这样我们一个简单的三角形就出来了,让我们一起来看看效果吧!

相关文章

  • Canvas

    一、初识canvas canvas画布默认宽高是 300 * 150 px canvas宽高要使用canvas标签...

  • 初识canvas

    趁着今天有空,就把canvas学了一下。提供一下学习地址:https://developer.mozilla.or...

  • 初识Canvas

    canvas元素(标签)是HTML5中新增的一个重要元素,它被用来专门绘制图形(当然和以前的svg、vml是有区别...

  • canvas初识

    canvas是html5中新增的标签,用于配合js绘制图形 创建一个画布 canvas 是一个二维网格。左上角坐标...

  • 初识canvas(二)

    canvas的用途之绘制矩形 绘制矩形 矩形是唯一一种可以直接在 2D 上下文中绘制的形状。与矩形有关的方法包括f...

  • 初识canvas(一)

    api 1.getContext() 要在这块画布(canvas)上绘图,需要取得绘图上下文。而取得绘图上下文对象...

  • 初识canvas(三)

    绘制路径 2D 绘制上下文支持很多在画布上绘制路径的方法。通过路径可以创造出复杂的形状和线条。要绘制路径,首先必须...

  • 初识canvas(画布)

    canvas(画布) 1、 HTML5提供的新元素2、 Canvas在HTML页面提供画布的功能,可以在页面中绘制...

  • 初识canvas(一)

    首先给大家发布一个消息,从今天开始,作者会陆续分享基于 3D 内容 -- webgl。同时也希望有兴趣的同学一起讨...

  • 初识canvas(二)

    上节文章中,给大家分享了canvas最基础的用法,包括绘制线条、控制渲染方式、绘制图形、作用域、添加阴影、清理、剪...

网友评论

      本文标题:初识Canvas

      本文链接:https://www.haomeiwen.com/subject/nyabmttx.html