简介

Canvas是 HTML5 新增的一个标签，它的主要作用是画矢量图。使用Javascript 脚本来绘制图像。canvas能做游戏，能做特别炫的效果，主要是为画图而生。
Canvas是一个实时渲染的图片，可以实现不刷新页面，对画布进行实时渲染（runtime)。

Canvas使用

1、判断用户浏览器是否支持 <canvas>标签

由于某些较老的浏览器（尤其是 IE9 之前的 IE 浏览器）或者浏览器不支持 HTML 元素 <canvas>，在这些浏览器上你应该总是能展示替代内容。

支持 <canvas> 的浏览器会只渲染 <canvas> 标签，而忽略其中的替代内容。不支持 <canvas> 的浏览器则会直接渲染替代内容。

<!--显示文本-->
<canvas>你的浏览器不支持 canvas，请升级你的浏览器。</canvas>
<!--显示图片-->
<canvas><img src="./img.jpg" alt=""> </canvas>

2、设置画布大小

如果不给 <canvas> 设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 <canvas> 的宽高。

let canvas=document.querySelector("canvas");
canvas.width=400;
canvas.height=300;

3、获取这个元素的context——图像稍后将在此被渲染。

<canvas> 会创建一个固定大小的画布，会公开一个或多个渲染上下文(getContext)，使用渲染上下文来绘制和处理要展示的内容。

我们重点研究 2D 渲染上下文，由 CanvasRenderingContext2D 接口完成实际的绘制。其他的上下文我们暂不研究，比如， WebGL 使用了基于 OpenGL ES的3D 上下文(getContext(“webgl”))。

//获得2d上下文对象
let ctx=canvas.getContext("2d");

4、检测支持性

var canvas = document.querySelector("canvas");
if (canvas.getContext){
	var ctx = canvas.getContext('2d');
	// drawing code here
} else {
	// canvas-unsupported code here
}

5、绘制矩形

<canvas> 只支持一种原生的图形绘制：矩形。所以其他图形都至少需要生成一种路径 (path)，在下面会讲到。

canvast 提供了三种方法绘制矩形：

1、fillRect(x, y, width, height)：绘制一个填充的矩形。
2、strokeRect(x, y, width, height)：绘制一个矩形的边框。
3、clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。

说明：这 3 个方法具有相同的参数。

x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)
width, height：指的是绘制的矩形的宽和高。

init();
function init(){
    let canvas=document.querySelector("canvas");
    if(!canvas.getContext) return;
    let ctx=canvas.getContext("2d");
    ctx.fillRect(10,10,100,50);// 绘制矩形，填充的默认颜色为黑色
    ctx.strokeRect(10,70,100,50);// 绘制矩形边框
	ctx.clearRect(15, 15, 50, 25);//清除指定的矩形区域
}

效果如下：
canvas

6、绘制路径

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。

使用路径绘制图形的步骤：

创建路径起始点；
调用绘制方法去绘制出路径；
把路径封闭；
一旦路径生成，通过描边或填充路径区域来渲染图形；

需要用到的方法：

beginPath()，新建一条路径，开始绘制；
moveTo(x, y)，把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标；
lineTo(x, y)，将线条绘制到什么位置；
closePath()，闭合路径，自动将现有点连接到起始点闭合；
stroke()，通过线条来绘制图形轮廓；
fill()，通过填充路径的内容区域生成实心的图形；

绘制一个五角星：

init();
function init(){
	let canvas=document.querySelector("canvas");
	if(!canvas.getContext) return;
	let ctx=canvas.getContext("2d");
	ctx.beginPath();
	ctx.moveTo(10,50);
	ctx.lineTo(90,50);
	ctx.lineTo(20,100);
	ctx.lineTo(50,20);
	ctx.lineTo(75,100);
	ctx.closePath();
	ctx.stroke();
}

canvas

7、样式和颜色

设置颜色：fillStyle和strokeStyle

fillStyle=color，设置图形的填充颜色；
strokeStyle=color，设置图形线条的颜色；
globalAlpha = 0.5，设置全局透明度，值为0.0-1.0，默认为1.0；

color，可以是表示css颜色值的字符串、渐变对象（canvasGradient）或者图案对象；默认情况下，线条和填充颜色都为黑色。

绘制一个黄色的五角星：

init();
function init(){
    let canvas=document.querySelector("canvas");
    if(!canvas.getContext) return;
    let ctx=canvas.getContext("2d");
    ctx.globalAlpha = 0.5; 
    ctx.beginPath();
    ctx.moveTo(10,50);
    ctx.lineTo(90,50);
    ctx.lineTo(20,100);
    ctx.lineTo(50,20);
    ctx.lineTo(75,100);
    ctx.closePath();
    ctx.globalAlpha = 0.5; //设置透明度为0.5
    ctx.strokeStyle="#ff0";//设置线条颜色
    ctx.stroke();
    ctx.fillStyle="#ff0";//设置填充颜色
    ctx.fill();
}

效果如下：
canvas

渐变：createLinearGradient和createRadialGradient

线性渐变，createLinearGradient(x1, y1, x2, y2)，接受 4 个参数，前两个定义起始点的坐标（x1,y1），后两个定义终点的坐标 (x2,y2) ；
径向渐变，createRadialGradient(x1, y1, r1, x2, y2, r2)，接受 6 个参数，前三个定义起始圆的原点 (x1,y1) ，和半径 r1，后三个参数则定义结束圆的原点 (x2,y2) ，和半径 r2；
addColorStop(stop,color)，定义渐变对象中的位置和颜色，第一个参数表示颜色的位置，取值范围为0.0-1.0之间；第二个参数表示css颜色值；
线性渐变和径向渐变，两个方法都返回一个canvasGradient对象；

绘制一个线性渐变颜色的边框和渐变的矩形：

init();
function init(){
    let canvas=document.querySelector("canvas");
    if(!canvas.getContext) return;
    let ctx=canvas.getContext("2d");
    //渐变颜色的边框
     let linear=ctx.createLinearGradient(0,0,0,100);
     linear.addColorStop(0,"red");
     linear.addColorStop(1,"yellow")
     ctx.strokeStyle=linear;
     ctx.strokeRect(0,0,100,100);
     //渐变的矩形
     let linear2=ctx.createLinearGradient(110,0,110,100);
     linear2.addColorStop(0,"red");
     linear2.addColorStop(0.5,"blue");
     linear2.addColorStop(1,"yellow")
     ctx.fillStyle=linear2;
     ctx.fillRect(110,0,100,100);
}

效果如下：
canvas
绘制径向渐变：

init();

function init() {
	let canvas = document.querySelector("canvas");
	if (!canvas.getContext) return;
	let ctx = canvas.getContext("2d");
	let radial=ctx.createRadialGradient(150,50,5,150,50,40);
	radial.addColorStop(0,"yellow");
	radial.addColorStop(0.7,"greenyellow");
	radial.addColorStop(1,"white")
	ctx.fillStyle=radial;
	ctx.fillRect(0,0,canvas.width,canvas.height);
	var radial2 = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
	radial2.addColorStop(0, '#A7D30C');
	radial2.addColorStop(0.9, '#019F62');
	radial2.addColorStop(1, 'rgba(1,159,98,0)');
	ctx.fillStyle = radial2;
	ctx.fillRect(0, 0, 100, 100);
}

效果如下：
canvas

图案填充：createPattern()

在指定的方向内重复指定的元素，元素可以是图片、视频，或者其他 <canvas> 元素，被重复的元素可用于绘制/填充矩形、圆形或线条等等。

语法：
context.createPattern(image,type);

参数	描述
image	规定要使用的模式的图片、画布或视频元素。
repeat	默认。该模式在水平和垂直方向重复。
repeat-x	该模式只在水平方向重复。
repeat-y	该模式只在垂直方向重复。
no-repeat	该模式只显示一次（不重复）。

案例，重复背景填充：

init();
var ctx,img;
function init() {
    let canvas = document.querySelector("canvas");
    if (!canvas.getContext) return;
    ctx = canvas.getContext("2d");
    img=new Image();
    img.src="./search_cart.png";
    img.addEventListener("load",loadHandler);        
}
function loadHandler(e){
    let pattern=ctx.createPattern(img,"repeat");
    ctx.fillStyle=pattern;
    ctx.fillRect(0,0,300,150);
}

效果如下：
canvas

8、线条

lineWidth 线条宽度

lineWidth=number，number只能为正值，默认值为1.0；

lineCap 线条端点样式

lineCap=style，有3个值：

butt：线段末端以方形结束；
round：线段末端以圆形结束；
square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

lineJoin 线段连接处显示的样式

lineJoin=type，有3个值：

miter(默认) 通过延伸相连部分的外边缘，使其相交于一点。
round 通过填充一个扇形，绘制拐角的形状。圆角的半径是线段的宽度。
bevel 在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。

9、阴影

属性	值	含义
shadowOffsetX	number	设置或返回阴影的x偏移，正值向右，负值向左（单位为px）
shadowOffsetY	number	设置或返回阴影的y偏移，正值向下，负值向上（单位为px）
shadowBlur	number	设置阴影的模糊程度（单位为px）
shadowColor	css颜色	设置阴影的颜色

绘制一个带有阴影的矩形边框：

init();
function init() {
    let canvas = document.querySelector("canvas");
    if (!canvas.getContext) return;
    let ctx = canvas.getContext("2d");
    ctx.strokeStyle = "red";
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur = 5;
    ctx.shadowColor = "#999999";
    ctx.strokeRect(10, 10, 60, 60);
}

效果如下：
canvas
案例：在浏览器上绘制一个画板，使鼠标在其中可以绘制内容

init();
var ctx;
function init() {
    let canvas = document.querySelector("canvas");
    canvas.width=1200;
    canvas.height=700;
    if (!canvas.getContext) return;
    ctx = canvas.getContext("2d");
    document.addEventListener("mousedown",mouseHandler);          
}
function mouseHandler(e){
    switch (e.type){
        case "mousedown":
            ctx.moveTo(e.clientX,e.clientY);
            document.addEventListener("mousemove",mouseHandler);
            document.addEventListener("mouseup",mouseHandler);
            break;
        case "mousemove":
            ctx.lineTo(e.clientX,e.clientY);
            ctx.lineWidth=5;
            ctx.strokeStyle="red";
            ctx.stroke();
            break;
        case "mouseup":
            document.removeEventListener("mousemove",mouseHandler);
            document.removeEventListener("mouseup",mouseHandler);
            break;
    }
}

试试效果吧：
canvas

蒲公英芽

发布了130 篇原创文章 · 获赞 46 · 访问量 3万+

私信关注

HTML5 Canvas详解（一）

简介

Canvas使用

1、判断用户浏览器是否支持 <canvas>标签

2、设置画布大小

3、获取这个元素的context——图像稍后将在此被渲染。

4、检测支持性

5、绘制矩形

6、绘制路径

7、样式和颜色

设置颜色：fillStyle和strokeStyle

渐变：createLinearGradient和createRadialGradient

图案填充：createPattern()

8、线条

lineWidth 线条宽度

lineCap 线条端点样式

lineJoin 线段连接处显示的样式

9、阴影

猜你喜欢