How to use html canvas

这篇文章主要介绍"html canvas怎么使用"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"html canvas怎么使用"文章能帮助大家解决问题。

canvas ：可以理解为一个div，作用是一块画板

如果想要使用canvas，需要创建一个"画家"。生成画家的方法：

var huaban = document.querySelector('.canvas');//画板var bicaso = huaban.getContext('2d');//画家 canvas上下文对象//绘画操作 //表示在距离画板左上10px 10px的位置画了一个长宽分别为50px的矩形，默认填充颜色黑色 绘制矩形bicaso.fillRect(10,10,50,50);//表示绘制轮廓线bicaso.strokeRect(10,10,50,50);//绘制画笔颜色bicaso.fillStyle='颜色';//擦除矩形方法bicaso.clearRect(x,y,要擦除的矩形宽度，要擦除的矩形高度);Transparency(透明度)

globalAlpha = transparencyValue: 这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。

globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过，我认为使用rgba()设置透明度更加好一些。

canvas基础demo

Document 您的浏览器不支持canvas，请更新或更换浏览器。 您的浏览器不支持canvas 您的浏览器不支持canvas // 2.在js脚本中获取到canvas元素 var canvas = document.getElementById('myCanvas'); // 判断getContext()方法是否存在，来检测浏览器是否支持canvas========================== if(canvas.getContext) { alert("您的浏览器支持canvas"); }else { alert("您的浏览器不支持canvas"); } // =============================================================================== // 3.通过canvas的getContext()方法获取画布上下文，即创建context对象。以获取允许进行绘画的2D环境。 或者3D环境("3D") var context = canvas.getContext("2d");//getContext("2d")该方法用于返回一个内建的h6对象，该对象提供了用于绘图的方法和属性，使用该对象可以在canvas画布中绘制图形。 相当于画笔。 // 4.绘制图形的操作 ============================================================================================================= //绘制一个矩形，填充色为蓝色，矩形坐标为(10,10) 长50宽80。------------------------------- context.fillStyle="blue"; context.fillRect(10,10,50,80);//strokeRect(x,y,width,height) clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。 // 循环生成若干个40px的小矩形，边框颜色随机------------------------------------------------- function draw0(){ var canvas = document.getElementById('canvas2'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); for (var i = 0; i < 6; i++){//6行6列 for (var j = 0; j < 6; j++){ ctx.fillStyle = "rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})"; // ctx.fillStyle = "rgb(randomInt(0, 255),randomInt(0, 255),randomInt(0, 255))"; ctx.strokeRect(j * 50, i * 50, 40, 40); // ctx.fillRect(j * 50, i * 50, 40, 40); } } } draw0(); /** 返回随机的 [from, to] 之间的整数(包括from，也包括to) 颜色随机生成失败？？？？？？？？？？？？？？？？ */ function randomInt(from, to){ return parseInt(Math.random() * (to - from + 1) + from); } //绘制一条直线------------------------------------------------- context.moveTo(0,0); context.lineTo(200,30); context.stroke(); // 绘制复杂图形--------使用绘制路径方法--------Math.sin()----Math.cos()------Math.PI------beginPath()---lineTo()----closePath()----------- var n = 0; var dx = 150; var dy = 150; var s = 100; context.beginPath();//开始一条路径 或重置当前路径 context.fillStyle = 'orange';//填充属性设置 context.strokeStyle = 'yellow';//边框样式 context.lineWidth = '1';//边框宽度 var x = Math.sin(0);//使用sin cos三角函数计算顶点坐标x,y var y = Math.cos(0); var dig = Math.PI / 15 * 11;//Math.PI返回的是圆周率 π for(var i = 0;i