H5 Canvas 绘图

一、什么是Canvas

Canvas 是H5的一部分，允许脚本语言动态渲染图像。Canvas定义一个区域，可以由html属性定义该区域的宽高，JavaScript代码可以访问该区域，通过一整套完整的绘图功能（API），在网页上渲染动态效果图。

二、Canvas能做什么

  1. 游戏：毫无疑问，游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧。
  2. 图表制作：图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作。当然，使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。
  3. 字体设计：对于字体的自定义渲染将完全可以基于Web，使用HTML5技术进行实现。
  4. 图形编辑器：图形编辑器能够100%基于Web实现。
  5. 其他可嵌入网站的内容：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。

三、Canvas基本用法

3.1 使用Canvas必须先设置其width、height属性，指定可绘图区域大小。不指定的情况默认大小 为300X150 背景透明。

<canvas id="myCanvas" style="width: 300px;height: 200px;border:  1px solid red;"></canvas>

3.2 绘制一个带粉色的矩形框

绘制图像的话，我们首先要取到canvas并调用getContext()方法，然后传入上下文名字（2D/3D）,2D有两种基本绘图操作|填充(fillStyle)|描边(strokeStyle)|，这两个属性默认值为#000。

        <script >

            //获取canvas元素
            var c=document.getElementById("myCanvas");
            //创建ctx对象
            var ctx=c.getContext("2d");
            //fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
            //fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
            ctx.fillStyle="#FF0000";
            ctx.fillRect(0,0,150,75);

        </script>

3.3绘制路径

3.3.1 beginPath():新建一条路径，一旦创建成功，图形绘制命令被指向到路径上生成路径

3.3.2 moveTo(x,y)：将画笔移动到指定坐标，类似起点

3.3.3 lineTo(x,y) ：将画笔移动到结束坐标，类似终点

3.3.4 closePath()：闭合路径

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="myCanvas" style="border:  1px solid red;"></canvas>

        <script >
             var myCanvas=document.querySelector("#myCanvas");
             myCanvas.width="500";
             myCanvas.height="300";
             var  cxt=myCanvas.getContext("2d");

//             moveTo(x,y) 定义线条开始坐标
//             lineTo(x,y) 定义线条结束坐标
            //画三角形
             cxt.moveTo(50,50);
             cxt.lineTo(250,100);
             cxt.lineTo(50,200);
             cxt.lineTo(50,50);
             //画直线
             cxt.moveTo(0,0);
             cxt.lineTo(500,300);

             cxt.moveTo(0,50);
             cxt.lineTo(400,300);

             cxt.strokeStyle="red";
             cxt.lineWidth="5px";
             cxt.lineCap="round";
             cxt.stroke();
        </script>

    </body>
</html>

注：

lineCap=butt(线末端为方形) | round（线末端为圆形） | square（线末端为方形，但增加了一个宽度和线段相同，高度是线段厚度一半的区域）

lineJoin=round(拐角处扇形) | bevel（拐角处矩形） |miter（拐角处菱形）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="myCanvas" width="500px" height="500px"></canvas>
        <script type="text/javascript">
    function draw(){
    var canvas = document.getElementById(‘myCanvas‘);
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");

    var lineJoin = [‘round‘, ‘bevel‘, ‘miter‘];
    ctx.lineWidth = 20;

    for (var i = 0; i < lineJoin.length; i++){
        ctx.lineJoin = lineJoin[i];
        ctx.beginPath();
        ctx.moveTo(50, 50 + i * 50);
        ctx.lineTo(100, 100 + i * 50);
        ctx.lineTo(150, 50 + i * 50);
        ctx.lineTo(200, 100 + i * 50);
        ctx.lineTo(250, 50 + i * 50);
        ctx.stroke();
    }

}
draw();
        </script>

    </body>
</html>

3.4 画圆



var myCanvas=document.querySelector("#myCanvas");
			 myCanvas.width="1000";
			 myCanvas.height="300";
			 var  cxt=myCanvas.getContext("2d");


 //aarc(x,y,radius,startAngle,endAngle,conterclockwise)
            // (x,y)圆心坐标、radius半径、(startAngle,endAngle)起始角度和终止角度、conterclockwise顺时针(false)/逆时针(true)


// cxt.closePath();决定路径是否闭合
				cxt.lineWidth="5";
				cxt.strokeStyle="red";
				for(var i=0;i<10;i++){
					cxt.beginPath();
					cxt.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
					cxt.closePath();
					cxt.stroke();
				}


for(var i=0;i<10;i++){
					cxt.beginPath();
					cxt.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10);


cxt.stroke();
				}


 




3.5 绘制文本


使用canvas绘制文本主要有以下几个属性和方法


font——定义字体，大小


textAlign——文本对齐方式


textBaseline——文本的基线（|top|hanging|middle|alphabetic|ideographic|bottom| ）


fillText（text（要绘制的文本）,x,y）——在canvas上绘制实心的文本


strokeText(text,x,y)——在canvas上绘制空心的文本




var myCanvas=document.querySelector("#myCanvas");
			 myCanvas.width="1000";
			 myCanvas.height="300";
			 var  cxt=myCanvas.getContext("2d");


cxt.font="30px Arial";


cxt.fillText("Hello World",20,50);


cxt.font="60px Arial";


cxt.strokeText("Hello World",20,150);




3.6 绘制图像


canvas绘制图像主要用drawImage(image,x,y)


 var myCanvas=document.querySelector("#myCanvas");
myCanvas.width="1000";
 myCanvas.height="300";
var  cxt=myCanvas.getContext("2d");
var imgObj=new Image();
imgObj.src="img/pic4.jpg"//原图像大小1000×1419
imgObj.onload=function(){
cxt.drawImage(this,0,0,200,300);//this即imgObj,200,300指改变图片的大小
cxt.drawImage(this,220,0,200,300);
}




3.7 渐变


线性渐变：createLinearGradient(x,y,x1,y1) - 创建线条渐变


var myCanvas=document.querySelector("#myCanvas");
			 myCanvas.width="1000";
			 myCanvas.height="300";
			 var  cxt=myCanvas.getContext("2d");


   //矩形渐变
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

    //圆形渐变
var grd1=cxt.createLinearGradient(0,0,175,50);
grd1.addColorStop(0,"#FF0000");
grd1.addColorStop(1,"#00FF00");    

cxt.beginPath();
cxt.arc(105,160,50,0,Math.PI*2);
cxt.fillStyle=grd1;
cxt.fill();
cxt.closePath();


效果如下：




径向渐变：createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变




var myCanvas=document.querySelector("#myCanvas");
			 myCanvas.width="1000";
			 myCanvas.height="300";
			 var  cxt=myCanvas.getContext("2d");


var grd=cxt.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");

//矩形
cxt.fillStyle=grd;
cxt.fillRect(10,10,150,80);

//圆形

 var rg1=cxt.createRadialGradient(310,61,1,310,111,100);
        rg1.addColorStop(0,"#fff");
        rg1.addColorStop(1,"black");

        cxt.beginPath();
        cxt.arc(310,111,100,0,Math.PI*2);
        cxt.fillStyle=rg1;
        cxt.fill();
        cxt.closePath();


效果如下：




addColorStop()方法指定颜色停止


3.8 状态的保存和恢复


保存或者恢复 canvas 里的状态 (填充，描边，渐变，坐标位移,裁切)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="myCanvas" width="500px" height="500px"></canvas>
        <script type="text/javascript">

var ctx;
function draw(){
    var canvas = document.getElementById(‘myCanvas‘);
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");

    ctx.fillRect(0, 0, 150, 150);   // 使用默认设置绘制一个矩形
    ctx.save();                  // 保存默认状态

    ctx.fillStyle = ‘red‘       // 在原有配置基础上对颜色做改变
    ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形

    ctx.save();                  // 保存当前状态
    ctx.fillStyle = ‘#FFF‘       // 再次改变颜色配置
    ctx.fillRect(30, 30, 90, 90);   // 使用新的配置绘制一个矩形

    ctx.restore();               // 重新加载之前的颜色状态
    ctx.fillRect(45, 45, 60, 60);   // 使用上一次的配置绘制一个矩形

    ctx.restore();               // 加载默认颜色配置
    ctx.fillRect(60, 60, 30, 30);   // 使用加载的配置绘制一个矩形
}
draw();
        </script>

    </body>
</html>


3.9 变换


3.9.1 translate(x,y) 移动到指定位置


3.9.2  rotate（angle）顺时针旋转，以坐标原点为中心


3.9.3 scale(x,y)  增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。参数x,y默认1，比1小的缩减，比1大的增倍


3.10 合成


globalCompositeOperation = type


var ctx;
function draw(){
    var canvas = document.getElementById(‘myCanvas‘); 

if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 200, 200);ctx.globalCompositeOperation = "source-over"; //全局合成操作 ctx.fillStyle = "red"; ctx.fillRect(100, 100, 200, 200); } draw();


注：蓝旧红新


3.10.1 默认source-over，新图像覆盖




3.10.2 source-in 仅仅会出现新图像与原来图像重叠的部分，其他区域都变成透明的。(包括其他的老图像区域也会透明)




3.10.3 source-out 仅仅显示新图像与老图像没有重叠的部分，其余部分全部透明。(老图像也不显示)




3.10.4 source-top 新图像仅仅显示与老图像重叠区域。老图像仍然可以显示。




3.10.5 destination-over 新图像会在老图像的下面。






3.10.6 destination-in 仅仅新老图像重叠部分的老图像被显示，其他区域全部透明。






3.10.7 destination-out 仅仅老图像与新图像没有重叠的部分。 注意显示的是老图像的部分区域。






3.10.8destination-atop 老图像仅仅仅仅显示重叠部分，新图像会显示在老图像的下面。






3.10.9 lighter 新老图像都显示，但是重叠区域的颜色做处理


3.10.10   darken 新老图像都显示，重叠部分显示最黑像素（每个颜色位进行比较，得到最小的)


3.10.11  lighten 保证重叠部分最量的像素。(每个颜色位进行比较，得到最大的)


3.10.12 xor 重叠部分为透明


3.10.13 copy 仅保留新图像


关于canvas的基本用法就到这，后面会整一些小案例



原文地址：https://www.cnblogs.com/smile-xin/p/11476968.html
				


				
时间： 2024-10-09 02:54:02 

		


		


	

	
	

		


		
H5 Canvas 绘图的相关文章


								

		

			

                HTML5 Canvas 绘图入门
			

		

		

									

				HTML5 Canvas 绘图入门 HTML5 Canvas 绘图入门,仅供学习参考 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5 移动Web开发指南</title> <style type="text/css"> h1, h5 { text-align: center; } canvas {			

		

	

				

		

			

                canvas 绘图api的位置问题
			

		

		

									

				今天因为canvas绘图的为之问题浪费了一些时间. 我们知道canvas的默认宽高是300X150嘛. 实际使用的时候当然是自定义一个高宽啦. 在js中通过canvasDom.style设置了某个高宽的时候,canvas在页面上也确实伸缩了. 但是用某些api的时候,传入位置参数时,还是按照300X150规格来处理位置的!如果想让位置居中的话,传入canvas.width/2或canvas.height/2就好了. 这是之前留意过的问题,今天才发现.可怜我试错地在模拟器上反复折腾,确定真相的我眼			

		

	

				

		

			

                HTML学习总结（四）【canvas绘图、WebGL、SVG】
			

		

		

									

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

		

	

				

		

			

                引言：Canvas绘图API快速入门
			

		

		

									

				引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏动画效果的原理是怎样的?本篇文章将带您在20分钟内快速了解和上手HTML5游戏开发的神器:Canvas绘制API. 一.Canvas是什么? Canvas就是一个画布,可以进行画任何的线.图形.填充等一系列的操作,而且操作的画图就是js,所以让js编程到了嗑药的地步.另外Canvas不仅仅提供简单的			

		

	

				

		

			

                伙伴们休息啦canvas绘图夜空小屋
			

		

		

									

				HTML5 canvas绘图夜空小屋 伙伴们园友们,夜深了,休息啦,好人好梦... 查看效果:http://hovertree.com/texiao/html5/28/ 效果图如下: 代码如下: 1 <!doctype html> 2 <html> 3 <head><meta name="viewport" content="width=device-width, initial-scale=1" /> 4 <t			

		

	

				

		

			

                Android中Canvas绘图之Shader使用图文详解
			

		

		

									

				概述 我们在用Android中的Canvas绘制各种图形时,可以通过Paint.setShader(shader)方法为画笔Paint设置shader,这样就可以绘制出多彩的图形.那么Shader是什么呢?做过GPU绘图的同学应该都知道这个词汇,Shader就是着色器的意思.我们可以这样理解,Canvas中的各种drawXXX方法定义了图形的形状,画笔中的Shader则定义了图形的着色.外观,二者结合到一起就决定了最终Canvas绘制的被色彩填充的图形的样子. 类android.graphics			

		

	

				

		

			

                Android中Canvas绘图之PorterDuffXfermode使用及工作原理详解
			

		

		

									

				概述 类android.graphics.PorterDuffXfermode继承自android.graphics.Xfermode.在用Android中的Canvas进行绘图时,可以通过使用PorterDuffXfermode将所绘制的图形的像素与Canvas中对应位置的像素按照一定规则进行混合,形成新的像素值,从而更新Canvas中最终的像素颜色值,这样会创建很多有趣的效果.当使用PorterDuffXfermode时,需要将将其作为参数传给Paint.setXfermode(Xfermo			

		

	

				

		

			

                Android中Canvas绘图基础详解（附源码下载）
			

		

		

									

				Android中,如果我们想绘制复杂的自定义View或游戏,我们就需要熟悉绘图API.Android通过Canvas类暴露了很多drawXXX方法,我们可以通过这些方法绘制各种各样的图形.Canvas绘图有三个基本要素:Canvas.绘图坐标系以及Paint.Canvas是画布,我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面,在drawXXX方法中我们需要传入要绘制的图形的坐标形状,还要传入一个画笔Paint.drawXXX方法以及传入其中的坐标决定了要绘制的图形的形状			

		

	

				

		

			

                canvas绘图详解笔记（一）
			

		

		

									

				声明一下:这里我不会用太多文字去详解介绍canvas是什么,相信了解过canvas的人都知道它的魅力所在,如果你对canvas还比较陌生的话,建议可以查阅相关资料了解一下.这里我将对canvas绘图详解课程做一次详细的笔记,方便大家和自己日后可以学习.那么接下来就是直接进入笔记内容的学习: 首先创建一个canvas元素,我们只需要在html文件中加入这么一句代码: <canvas id="canvas">当前浏览器不支持canvas,请更换浏览器使用!</canvas