canvas 绘图

最新推荐文章于 2021-03-31 18:40:02 发布

易安sparkle

最新推荐文章于 2021-03-31 18:40:02 发布

阅读量579

点赞数 1

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/weixin_43675447/article/details/87737944

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简述

canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。标记和 SVG以及 VML 之间的一个重要的不同是，< canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。
canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。

创建canvas元素

创建了canvas元素后，要在canvas元素上面绘制图象，首先必须获取canvas环境上下文：canvas.getContext(画布上绘制的类型)

2d： 表示2维
experimental-webgl： 表示试验版3维
webgl：表示3维

例1：绘制线条

<canvas id="can"></canvas>
<script>
    var can=document.getElementById("can");    //获取canvas元素
    //动态设置宽和高
    //获取屏幕的可视区域宽与高
    var window_w=document.documentElement.clientWidth;
    var window_h=document.documentElement.clientHeight;
    can.width=window_w;
    can.height=window_h;
    //操作canvas
     var content=can.getContext("2d");  //转换为2d模式
    //使用js提供的API设置

    /*1.绘制线条*/
    content.lineWidth=10;   /*设置线宽*/
    content.strokeStyle="red";  /*设置线的颜色*/
    content.moveTo(0,0);   /*将画笔移动到0,0点*/
    content.lineTo(300,400);  /*画线到300,400点*/
    content.stroke();    /*执行画线*/
</script>

运行效果：
在这里插入图片描述在页面上就显示了一条直线，另存为后就是一张背景透明的png图片。

画线

context.moveTo(x,y)：把画笔移动到x,y坐标，建立新的子路径；
context.lineTo(x,y)：建立上一个点到x,y坐标的直线，如果没有上一个点，则等同于moveTo(x,y)，把（x,y）添加到子路径中；
context.stroke() ：执行画线

例2：结合javascript事件实现鼠标自由划线：

<canvas id="can"></canvas>
<script>
    var can=document.getElementById("can");   //获得画布元素
    //动态设置宽和高
    //获取屏幕的可视区域宽与高
    var window_w=document.documentElement.clientWidth;
    var window_h=document.documentElement.clientHeight;
    can.width=window_w;
    can.height=window_h;    
    var content=can.getContext("2d");  //获得2维绘图的上下文
    content.lineWidth=8;    //设置线宽
    content.strokeStyle="gold";     //设置线的颜色
    //设置鼠标移动事件
    can.onmousemove=function(e){
        content.lineTo(e.clientX, e.clientY);   //划线到当前客户端的x与y坐标
        content.stroke();  //执行画线
    }
</script>

运行效果：

在这里插入图片描述

路径与beginPath,closePath，fill

canvas的环境上下文中总有唯一一个路径，路径包含多个子路径，这些子路径可以看成是一系列点的集合。
beginPath()：清空子路径，一般用于开始路径的创建；在几次循环地创建路径的过程中，每次开始创建时都要调用beginPath函数。
closePath()：如果当前子路径是打开的，就关闭它；否则把子路径中的最后一个点和路径中的第一个点连接起来，形成闭合回路。
canvas绘图有两种模式：一种是fill，一种是stroke,fill是填充，stroke是描边线，fillstyle与strokeStyle指定绘图样式

例3：路径的演示

<canvas id="can"></canvas>
<script>
    var can=document.getElementById("can");   //获得画布元素
    //动态设置宽和高
    //获取屏幕的可视区域宽与高
    var window_w=document.documentElement.clientWidth;
    var window_h=document.documentElement.clientHeight;
    can.width=window_w;
    can.height=window_h;
    var content=can.getContext("2d");  //获得2维绘图的上下文
    content.lineWidth=8;  //设置线宽
    content.strokeStyle="pink";   //设置线的颜色
    content.moveTo(0,0);  //移动画笔到0,0点
    content.lineTo(300,300);  //画线到300,300的位置
    content.stroke();  //执行描边

    content.beginPath();  //清空子路径，一般用于开始路径的创建
    content.moveTo(300,300);
    content.lineTo(0,600);
    content.lineTo(600,600);
    content.closePath();  //闭合
    content.fillStyle="purple";  //设置填充颜色
    content.fill();  //执行填充
</script>

运行效果：
在这里插入图片描述

绘制矩形

context.strokeRect(x,y,width,height)：以x,y为左上角，绘制宽度为width,高度为height的矩形；
context.fillRect(x,y,width,height)：以x,y为左上角，填充宽度为width,高度为height的矩形；
context.clearRect(x,y,width,height)：清除以x,y为左上角，宽度为width,高度为height的矩形区域

例4：绘制矩形

<canvas id="can"></canvas>
<script>
    var can=document.getElementById("can");   //获得画布元素
    //动态设置宽和高
    //获取屏幕的可视区域宽与高
    var window_w=document.documentElement.clientWidth;
    var window_h=document.documentElement.clientHeight;
    can.width=window_w;
    can.height=window_h;
    var content=can.getContext("2d");  //获得2维绘图的上下文
    content.lineWidth=8;  //设置线宽
    content.strokeStyle="green";
    content.strokeRect(0,0,600,600);  //画一个空心的矩形
    content.fillStyle="red";
    content.fillRect(200,200,200,200);  //画一个实心矩形
    content.clearRect(250,250,100,100);  //清除指定的矩形区域
</script>

运行效果：
在这里插入图片描述

绘制圆弧

方法：context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
解释：arc方法用来绘制一段圆弧路径；以(x,y)圆心位置radius为半径、startAngle为起始弧度、endAngle为终止弧度，而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定，如果为true就是逆时针，false 则为顺时针，Math.PI * 2 刚好为一周。

例5：绘制圆弧

<canvas id="can"></canvas>
<script>
    var can=document.getElementById("can");   //获得画布元素
    //动态设置宽和高
    //获取屏幕的可视区域宽与高
    var window_w=document.documentElement.clientWidth;
    var window_h=document.documentElement.clientHeight;
    can.width=window_w;
    can.height=window_h;
    var content=can.getContext("2d");  //获得2维绘图的上下文
    //绘制圆弧
    content.beginPath();
    content.fillStyle="pink";
    content.arc(700,350,200,0,Math.PI,true);
    content.fill();
    content.closePath();
    //绘制圆
    content.beginPath();
    content.fillStyle="orange";
    content.arc(700,400,140,0,Math.PI*2,true);
    content.fill();
    content.closePath();
</script>

运行效果：
在这里插入图片描述
例6：添加渐变色

使用addColorStop()

content.beginPath();
var rad=content.createRadialGradient(700,300,50,700,300,200);
//添加渐变色
rad.addColorStop(0,"paleturquoise");
rad.addColorStop(0.2,"lightgreen");
rad.addColorStop(0.4,"plum");
rad.addColorStop(0.6,"lightblue");
rad.addColorStop(0.8,"silver");
rad.addColorStop(1,"pink");
content.fillStyle=rad;
content.arc(700,300,230,0,Math.PI*2,true);
content.fill();
content.closePath();

运行效果：
在这里插入图片描述

绘制图像

context.drawImage(image,x,y)：把image图像绘制到画布上x,y坐标位置；
context.drawImage(image,x,y,w,h)：把image图像绘制到画布上x,y坐标位置，图像的宽度是w,高度是h；
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)：截取image图像以sx,sy为左上角坐标，宽度为sw,高度为sh的一块矩形区域绘制到画布上以dx,dy坐标位置，图像宽度是dw,高度是dh

注：其中image可以是htmlImageElement元素，htmlcanvasElement元素，htmlVideoElement元素

例7：绘制图像

<canvas id="can"></canvas>
<script>
    var can=document.getElementById("can");   //获得画布元素
    //动态设置宽和高
    //获取屏幕的可视区域宽与高
    var window_w=document.documentElement.clientWidth;
    var window_h=document.documentElement.clientHeight;
    can.width=window_w;
    can.height=window_h;
    var content=can.getContext("2d");  //获得2维绘图的上下文
    var img=document.createElement("img");
    img.src="./image/my_2.png";
    content.lineWidth=6;
    content.strokeStyle="blue";
    content.strokeRect(500,150,300,300);
    content.drawImage(img,0,0,200,200,550,210,200,200);
</script>

运行效果：
在这里插入图片描述

绘制文字

context.fillText(text,x,y,[maxWidth])：在canvas上填充文字；text表示需要绘制的文字；x,y分别表示绘制在        canvas上的横，纵坐标；最后一个参数可选，表示显示文字的最大宽度，防止文字显示溢出；
context.strokeText(text,x,y,[maxWidth])：在canvas上描边文字，参数的意义同fillText
context.font：设置字体
context.font='italic bolder 48px 黑体';

例8：绘制艺术字

<canvas id="can"></canvas>
<script>
    var can=document.getElementById("can");   //获得画布元素
    //动态设置宽和高
    //获取屏幕的可视区域宽与高
    var window_w=document.documentElement.clientWidth;
    var window_h=document.documentElement.clientHeight;
    can.width=window_w;
    can.height=window_h;
    var content=can.getContext("2d");  //获得2维绘图的上下文
    var rad=content.createRadialGradient(700,200,10,700,200,300);
    //添加渐变色
    rad.addColorStop(0,"red");
    rad.addColorStop(0.1,"blue");
    rad.addColorStop(0.2,"green");
    rad.addColorStop(0.3,"pink");
    rad.addColorStop(0.4,"orange");
    rad.addColorStop(0.5,"green");
    rad.addColorStop(0.6,"orange");
    rad.addColorStop(0.7,"blue");
    rad.addColorStop(0.8,"yellow");
    rad.addColorStop(0.9,"red");
    rad.addColorStop(1,"green");

    content.beginPath();  //创建路径
    content.font="50px yahei";  //设置字体
    content.strokeStyle=rad;  //设置描边文字颜色
    content.strokeText("Hello World !",400,200,500);  //设置描边文字

    content.fillStyle=rad;  //设置填充文字颜色
    content.fillText("Hello World!",800,200,500);  //设置填充文字
    content.closePath();  //关闭路径
</script>