JavaScript高级程序设计(第三版) 第15章 Canva

2018-11-13  本文已影响0人  ft207741

Menu

第15章 使用 Canvas 绘图

15.1 基本用法
15.2 2D 上下文
15.1 基本用法
  1. HTML里添加<canvas>元素：接着必须先设置其 width 和 height 属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持<canvas>元素，就会显示这些信息。下面就是<canvas>元素的例子。
<canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
  1. 取得绘图上下文：要在这块画布（canvas）上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用getContext()方法并传入上下文的名字。传入"2d"，就可以取得 2D 上下文对象。
var drawing = document.getElementById("drawing");
// 取得 2D 上下文对象
var context = drawing.getContext("2d");
  1. 导出在<canvas>元素上绘制的图像：使用 toDataURL()方法，这个方法接受一个参数，即图像的 MIME

类型格式，而且适合用于创建图像的任何上下文。默认情况下，浏览器会将图像编码为 PNG 格式（除非另行指定

）。比如，要取得画布中的一幅 PNG 格式的图像。：

var drawing = document.getElementById("drawing");
//取得图像的数据 URI
var imgURI = drawing.toDataURL("image/png");
//显示图像
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);
15.2 2D 上下文
var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");
// 所有涉及描边和填充的操作都将使用这两个样式，填充和描边的颜色需要写在位置前面；
context.strokeStyle = "red";
context.fillStyle = "#0000ff"

//绘制红色矩形
context.fillStyle = "#ff0000";
// (x, y, width, height)
context.fillRect(10, 10, 50, 50);  
//绘制半透明的蓝色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);

//绘制红色描边矩形
context.strokeStyle = "#ff0000";
context.strokeRect(10, 10, 50, 50);
//绘制半透明的蓝色描边矩形
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(30, 30, 50, 50);
// 以上代码绘制了两个重叠的矩形。不过，这两个矩形都只有框线，内部并没有填充颜色

ctx.fillRect(0, 0, 100, 100);
ctx.clearRect(30, 30, 40, 40)

以上code效果 

canvas = document.getElementById("drawing");
context = canvas.getContext("2d"); // 得到画图板对象； ?
context.beginPath();  // 创建新路径；
context.strokeStyle = "rgba(255,0,255,0.66)";
context.lineWidth = 3;
context.arc(250, 250, 100, 2*Math.PI, false);   //  弧度方法；
context.stroke();

context.moveTo(250,250);
context.lineTo(250,160);
context.stroke();

var c=document.getElementById("drawing");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(50,250);
ctx.bezierCurveTo(200,150,300,350,450,250);
        
// cp1x     第一个贝塞尔控制点的 +


x 坐标
// cp1y     第一个贝塞尔控制点的 y 坐标
// cp2x     第二个贝塞尔控制点的 x 坐标
// cp2y     第二个贝塞尔控制点的 y 坐标
// x    结束点的 x 坐标
// y    结束点的 y 坐标

canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");  // 创建canvas的执行环境；
context.beginPath();  // 创建画图路径；
context.moveTo(50,250);
context.quadraticCurveTo(250, 450,450, 250);  // 一个控制点的线；
context.stroke()   // 笔画描边；

context.beginPath();  // 创建画图路径；
context.rect(50,50,100,65);
context.stroke()   // 笔画描边；

context.beginPath();  // 创建画图路径；
context.moveTo(50,250);
context.quadraticCurveTo(250, 450,450, 250);  // 一个控制点的线；
context.closePath()；
context.stroke()；  // 笔画描边；
closePath()效果 
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 剪切矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制绿色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
不使用clip 使用clip
textBaseline 
var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    fontsize = 150;
    ctx.font = fontsize + "px Arial";
    while(ctx.measureText("Hello world!").width > 500){

        fontsize-- ;
        ctx.font = fontsize + "px Arial";

    }
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.translate(250, 250);
    ctx.rotate(90 * Math.PI / 180);
    ctx.scale(0.5, 0.5);
    ctx.fillText("Hello World", 10 , 10);

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "pink";
ctx.fillRect(100,100,100,100)
var deg = Math.PI/180;  //deg = 1°
ctx.translate(150, 150);      //把原点点从零移到正方形的中心点
ctx.rotate(45*deg);    //绕着原点旋转45度（即绕着图像中心点旋转45度）， 下面的transform也是同样作用
// transfrom要实现旋转，需要设置前4个参数
// ctx.transform(Math.cos(45*deg),Math.sin(45*deg),-Math.sin(45*deg),Math.cos(45*deg),0,0);
ctx.fillStyle = "blue";
ctx.fillRect(-50,-50,100,100) //旋转后的图像坐标需要从新的圆点回到原来的坐标， 即-width， -height


ctx.font =  "150px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.translate(250, 250);
ctx.rotate(90 * Math.PI / 180);
ctx.fillText("Hello World", 10 , 10);

ctx.scale(0.5, 0.5);
ctx.fillText("Hello World", 10 , 10);

context.shadowColor = "rgba(0,0,255,0.1)";  // 阴影颜色，不设置默认黑色和透明度 不透明是1
context.shadowOffsetX = -100;   // x 轴方向的阴影偏移量 默认0
context.shadowOffsetY = 1;   // y 轴方向的阴影偏移量 默认0
context.shadowBlur = 20;       // 模糊的像素数，默认 0，即不模糊
context.drawImage(img,50,50,200,150)

var gradient = context.createLinearGradient(30, 30, 80, 80);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
//绘制渐变矩形
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);
  1. 放射渐变
var gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
//绘制渐变矩形
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);

img = document.getElementById("myImg");
canvasB = document.getElementById("myCanvasB");
contextB = canvasB.getContext("2d");
// 获取图像，把图像缩小到100x100像素；
contextB.drawImage(img, 0,0,100,100);

canvasA = document.getElementById("myCanvasA");
contextA = canvasA.getContext("2d");
// convasA的Context里创建Pattern，放缩小了的canvasB画布和repeat模式
pattern = contextA.createPattern(canvasB,"repeat");
// 填充规则
contextA.fillStyle = pattern;
contextA.fillRect(0,0,500,500)
}

img = document.getElementById("myImg");
var c=document.getElementById("drawing");
var ctx=c.getContext("2d");
// img放到画布里；
ctx.drawImage(img,0,0,500,500);
// 取得图像数据
imgData = ctx.getImageData(0,0,c.width,c.height);
// 每个 ImageData 对象都有三个属性： width、 height 和data。
// 在imgData.data数组中，存着每一个像素点的rgba的值；
data = imgData.data;
for (let i=0, len=data.length; i<len; i+=4){
    //得到每个像素点的数据
    red = data[i];
    green = data[i+1];
    blue = data[i+2];
    //求得每个像素点rgb的平均值
    var average = Math.floor((red+green+blue)/3);
    //设置颜色值，透明度不变
    data[i] = average;
    data[i+1] = average;
    data[i+2] = average;
}
// 覆盖原来的imgData.data的值
imgData.data = data;
ctx.putImageData(imgData,0,0);

canvas = document.getElementById("drawing");
context = canvas.getContext("2d");
context.globalAlpha = 0.5;    // 设置全局上下文的透明度
context.fillStyle = "red";
context.fillRect(0,0, 300, 150);  // 半透明红色
context.fillStyle = "blue";
context.fillRect(100,100, 300, 150);  // 半透明蓝色
上一篇 下一篇

猜你喜欢

热点阅读