Html5画布的细致介绍-

这篇文章主要介绍了Html5画布,canvas元素用于在网页上绘制图形。有乐趣的小同伴可以一起来理解一下 这篇文章主要介绍了Html5画布,canvas 元素用于在网页上绘制图形。有乐趣的小同伴可以一起来理解一下

对于HTML5画布canvas的功能

一、画布的运用

1、第一新建一个画布（canvas）

2、运用JavaScript来绘制图像

《script》
      Var c=document.getElementByID(“myCanvas”)//得到画布
      Var ctx=c.getContext(“2d”);//得到画笔
      Cxt.fillStyle=”#FF0000”;//添补色彩
      Cxt.fillRect(0,0,150,75);//规定顶点
《script》

3、Canvas - 途径

moveTo(x,y) 定义线条开端坐标

lineTo(x,y) 定义线条完毕坐标

1，Canvas的定义

默许画布在页面上会显示一块空白、无边框的矩形。为了让其显示轮廓，通过定义样式法则给其增加一个虚线边框：

canvas {
    border: 1px dashed black;
}

2，猎取Canvas的高低文对象

要完成画图任务，第一我们要拿到对象，接着取得其二维画图高低文。

下面样例演示在页面加载结束时猎取画图高低文：

《script》
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
 
        //这里写画图代码
    }
《script》

3，画直线

（1）下面绘制一条起点是(50,50)，终点是(150,150)的直线线条

context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();

//线条宽度
context.lineWidth = 10;
 
//线条色彩（支撑色彩编码与rgb()函数）
context.strokeStyle = "#cd2828";
context.strokeStyle = "rgb(205,40,40)";
 
context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
//线条宽度
context.lineWidth = 10;
//线条色彩
context.strokeStyle = "#cd2828";
 
//首先条直线,默许方头
context.moveTo(50, 50);
context.lineTo(250, 50);
context.stroke();
 
//第二条直线,运用圆头
context.beginPath();
context.moveTo(50, 100);
context.lineTo(250, 100);
context.lineCap = "round";
context.stroke();
 
//第三条直线,运用加长方头
context.beginPath();
context.moveTo(50, 150);
context.lineTo(250, 150);
context.lineCap = "square";
context.stroke();

注：画图高低文的beginPath()办法

上面样例可以看到每次开端新线段的绘制时，都要调取 beginPath() 办法。

要是没有这一步操纵，那么每次调取 stroke() 都会把画布上原有的线段再从新绘制一边。特殊像上面的例子，绘制新线段时都要修改高低文属性，要是不调取 beginPath() 办法，那么原有的直线也会运用新的样式绘制。

以上就是Html5画布的细致介绍的细致内容，更多请关注 百分百源码网 其它相干文章！