h5画布大小怎么改(h5画布大小)

H5canvascanvascanvas简介、绘制圆形/矩形、案例饼图绘制目录

1.canvas简介

2.canvas标签简介

3.画布上下文Context

4.案例：在canvas中绘制表格

5.canvas的beginPath状态

6.绘制一个矩形rect

7.画圆弧

8.案例：根据一组数据绘制饼图

1.canvas简介

canvas是HTML5提供的新标签canvas/canvas。与div类似，它是一个矩形画布。它可以支持JavaScript在其上绘图并控制每个像素；canvas有多种绘制路径，矩形、圆形。文字和的添加方式可以使页面更加丰富多彩。目前canvas广泛应用于游戏、视觉数据、广告等领域。

2.canvas标签介绍

canvas实际上是一个普通的HTML标签，需要关闭。可以设置宽度、高度、背景色属性，但宽度和高度单位必须是px，否则会被忽略；画布默认为300*150像素。

需要注意的是canvas元素的宽度和高度必须使用它自己的属性来设置。不要使用CSS选择器来控制画布的宽度和高度。否则，图像将被拉伸。除宽度和高度之外的其余属性都可以与CSS一起使用。这是一个简单的案例：

!DOCTYPEhtmlhtmlheadmetacharset='UTF-8'titlecanvas标签/标题样式#can1{background-color:cadetblue;border:2px纯红色；}/style/headbody!--使用canvas标签的属性设置宽度和高度--canvasid='can1'width='300px'height='150px'/canvas/body/html

效果如下：

3.canvas上下文Context

Context是画布的上下文，也就是绘图环境。是所有绘图操作API的入口或集合；canvas本身无法绘制任何内容，需要使用JavaScript来操作。Context是JavaScript操作canvas的接口。

获取上下文分为两步：首先获取canvas标签，然后获取标签的上下文；

script//1.通过DOM操作获取canvas标签varcanvas=document.getElementById('can1');//2.获取canvas上下文varctx=canvas.getContext('2d');/script

获取canvas上下文后，就可以在canvas上绘制图形了；context的相关属性如下：

ctx.moveTo(x,y);将画笔移动到坐标(x,y)位置

ctx.lineTo(x,y);从当前位置到坐标(x,y)位置画一条直线

ctx.closePath();闭合路径，闭合线

ctx.lineWidth;行宽

ctx.笔划样式；描边颜色，必须在描边之前使用

ctx.中风();渲染一条直线，相当于一个笔划

ctx.fillStyle;填充颜色，必须在填充前使用

ctx.fill();填充，默认黑色

接下来我们结合这些属性来绘制一个简单的正方形：

!DOCTYPEhtmlhtmlheadmetacharset='UTF-8'titlecanvas标签/标题样式#can1{背景颜色：rgb(204,216,216);border:2px纯红色；}/style/headbody!--使用canvas标签设置宽高属性--canvasid='can1'width='600px'height='500px'/canvas/bodyscript//DOM操作获取canvas标签varcanvas=document.getElementById('can1');//获取画布上下文varctx=canvas.getContext('2d');//绘制一个矩形ctx.moveTo(100,100);//将画笔移动到坐标100100ctx.lineTo(200,100);//从画笔Position绘制一条直线到坐标200100ctx.lineTo(200,200);//从当前位置到200200ctx.lineTo(100,200)画一条直线；//.从当前位置开始.ctx.closePath();//闭合线ctx.lineWidth=6;//线宽ctx.strikeStyle='red';//描边颜色ctx.lines();//渲染直线ctx.fillStyle='blue';//填充颜色ctx.fill();//填写/脚本/html

效果如下：

4.案例：在canvas画布中绘制表格

!DOCTYPEhtmlhtmlheadmetacharset='UTF-8'标题大小写：绘制表格/标题style/style/headbodydivcanvasid='table'/canvas/div/bodyscript(function(){varcanvas=document.getElementById('table');//获取canvas标签varctx=canvas.getContext('2d');//获取上下文//设置canvas的宽高和边框；ctx.中风();}}())/脚本/html

效果如下：

5.canvas的beginPath状态

需要知道，在canvas中绘制图形是基于状态的，也就是说，如果之前已经将描边颜色属性StrokeStyle设置为某种颜色，那么在后续的绘制中，所有线条都将是该颜色；如果再次设置描边颜色，所有线条都会变成最新设置的颜色，之前设置的颜色会被覆盖，无法实现不同的颜色。如下：

这时，为了绘制不同颜色的线条，需要使用beginPath打开一个新的状态；

ctx.beginPath();打开新状态的图纸，之前的设置不会被覆盖；新状态可以继承前一个状态的样式，但是新状态中设置的样式只能应用于新状态。以下情况：

6.绘制矩形rect

如果只是按照起点-画线-描边的步骤一步步画矩形，太麻烦了。Canvas还提供了快速绘制矩形、矩形的方法，并提供了各种属性。语法如下：

ctx.rect(x,y,宽度，高度);x,y是矩形左上角的坐标，宽度和高度的单位是像素px。该语法仅指定矩形的路径，没有填充或描边。ctx.lines(x,y,宽度，高度);结合绘画和描边来描画一个矩形。ctx.fillRect(x,y,宽度，高度);填充矩形，结合绘制和填充ctx.clearRect(x,y,width,height);清除矩形，相当于橡皮擦，矩形内的图像将被擦除。我们使用rect语法来绘制一个矩形，只需要一行代码：

!DOCTYPEhtmlhtmlheadmetacharset='UTF-8'标题绘制矩形/标题样式/样式/headbodydivcanvasid='table'/canvas/div/bodyscriptvarcanvas=document.getElementById('table');//获取画布标签varctx=canvas.getContext('2d');//获取上下文//设置画布宽度、高度和边框canvas.width=600;画布高度=400;canvas.style.border='2px实心#000';//快速绘制一个矩形ctx.rect(100,100,50,50);ctx.中风();//描画一个矩形ctx.StrokeRect(200,100,50),50);//填充矩形ctx.fillRect(300,100,50,50);/script/html

效果如下：

7.绘制圆形arc

ctx.arc(x,y,r,sAngle,eAngle,逆时针);x、y为中心点坐标；r是半径；sAngle为起始角度，从中心到最右点为0度，顺时针递增；eAngle为结束角，请注意是弧度；counterclocking：是否是逆时针，true为逆时针，false为顺时针。接下来我们使用arc来绘制圆弧，效果如下：

8.案例：根据一组数据绘制饼状图

!DOCTYPEhtmlhtmlheadmetacharset='UTF-8'title绘制饼图/标题style/style/headbodydivcanvasid='table'/canvas/div/bodyscriptvarcanvas=document.getElementById('table');//获取canvas标签varctx=canvas.getContext('2d');//获取上下文//设置画布宽度、高度和边框canvas.width=600;帆布。高度=400；canvas.style.border='2px实心#000';//定义饼图数据vardata=[{'value':0.2,'color':'#149985','title':'A市'},{'value':0.3,'color':'red','title':'B市'},{'value':0.4,'color':'蓝色','title':'C市'},{'value':0.1,'color':'#999999','title':'CityD'},]//绘制饼图vartempAngle=-90;//从-90开始绘制for(vari=0;idata.length;i++){ctx.beginPath();//每个周期绘制不同的扇区，因此必须打开一个新的状态ctx.moveTo(200,200);//每次回到圆心开始绘制varangle=data[i].value*360;//每个扇区的角度ctx.fillStyle=data[i].color;//颜色填充根据数据进行遍历varstartAngle=tempAngle*Math.PI/180;//起始角度varendAngle=(tempAngle+angle)*Math.PI/180;//每次结束角度=起始角度+扇形角度ctx.arc(200,200,100,startAngle,endAngle);温度角度=温度角度+角度；//每次绘制后，扇形的起始角度为原始角度加上扇形角度ctx.fill();}/脚本/html

案例效果如下：

饼图文字的绘制请参考下一期：H5CanvasCanvas入门到精通_第二部分

摘要：画布绘制的基本步骤

获取上下文：canvas.getContext('2d')开始新状态绘制：ctx.beginPath()画笔起点：ctx.moveTo(x,y)绘制线条：ctx.lineTo(x,y)关闭路径：ctx.closePath()Stroke:ctx.Stroke()快速通过画布进行三篇文章：

第1部分：canvas简介，绘制圆形和矩形；

第二部分：绘制文字、、坐标系、画布颜色和样式、绘制环境；

第3部分：画布库Konva.js的使用。