canvas-绘制矩形-读书笔记

使用<canvas>元素，必须先设置其width和height属性，指定可以绘图的区域大小。

要在画布上绘图，需要取得绘图上下文，也就是要调用getContext()方法并传入上下文的名字。在使用<canvas>元素前，首先要检测下getContext()方法是否存在，不是所有的版本的浏览器都支持的。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
        <script type="text/javascript">
            var drawing = document.getElementById("drawing");
            //确定浏览器支持<canvas>元素
            if(drawing.getContext) {
                var context = drawing.getContext("2d");
                //更多代码
            }
        </script>
    </body>

</html>

toDataURL()方法，可以导出canvas元素上绘制的图像，这个方法接受一个参数，即图像的MIME类型格式，而且适合用于创建图像的任何上下文。栗如：

var drawing = document.getElementById("drawing");

//确定浏览器支持canvas元素
if(drawing.getContext){
  var imgURI = drawing.toDataURL("image/png");
  
  //显示图像  
  var image = document.createElement("img");
  image.src = imgURI;
  document.body.appendChild(image);        
}

2D上下文的两周基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形，描边就是只在图形的边缘画线。这两个操作结果取决于两个属性：fillStyle和strokeStyle，这两个属性的值可以是字符串、渐变对象或模式对象，默认值都是“#000000”。

矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形相关的方法包括fillRect()、strokeRect()和clearRect()。这三个方法都能接收4个参数：矩形的x坐标，矩形的y坐标，矩形宽度和矩形高度，这些参数的单位都是像素。

通过fillRect()方法绘制矩形。举栗：

var drawing = document.getElementById("drawing");
            //确定浏览器支持<canvas>元素
if(drawing.getContext) {
   var context = drawing.getContext("2d");
   //绘制红色矩形
   context.fillStyle = "#ff0000";
   context.fillRect(10, 10, 50, 50);
   //绘制半透明的蓝色矩形
   context.fillStyle = "rgba(0,0,255,0.5)";
   context.fillRect(30, 30, 50, 50);
}

通过strokeRect()方法绘制矩形。举栗：

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
    var context = drawing.getContext("2d");
    //绘制红色描边矩形
    context.strokeStyle = "#ff0000";
    context.strokeRect(10, 10, 50, 50);
    //绘制半透明的蓝色描边矩形
    context.strokeStyle = "rgba(0,0,255,0.5)";
    context.strokeRect(30, 30, 50, 50);
}

 

参考资料

《javascript高级程序设计(第3版)》第15章 使用Canvas 绘图

posted @ 2017-04-18 14:31  winteronlyme  阅读(207)  评论(0)  编辑  收藏  举报