介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title>帆布快速入门& lt;/title>
& lt;元charset=皍tf-8"/比;
& lt;/head>
& lt; body>
& lt; div>
& lt;帆布id=癿ainCanvas"宽度=?40”;身高=?80“祝辞& lt;/canvas>
& lt;/div>
& lt;/body>
& lt;/html> //DOM写法
窗口。onload=function () {
画布var=. getelementbyid (“mainCanvas");
var=canvas.getContext上下文(“2 d");
};//jQuery写法
美元(文档)。准备好(函数(){=$ var画布(“# mainCanvas");
var=canvas.get上下文(0).getContext (“2 d");
});//接下来就可以调用上下文的方法来调用绘图API //绘制一个填充矩形
上下文。fillRect (x, y,宽度、高度)//绘制一个边框矩形
上下文。strokeRect (x, y,宽度、高度)//清除一个矩形区域
上下文。clearRect (x, y,宽度、高度) //示例
context.beginPath ();//开始路径
上下文。函数(40、40);//移动到点(40、40)
上下文。画线(300,40);//画线到点(300年,30)
上下文。画线(300);//画线到点(40300)
context.closePath ();//结束路径
context.stroke ();//绘制轮廓//或者填充用context.fill (); var颜色;//指定RGB值
颜色=皉gb (255, 0, 0)“;//指定RGBA值(最后一个参数为α值,取值0.0 ~ 1.0)
颜色=皉gba (255, 0, 0, 1)“;//指定16进制码
颜色=? FF0000";//用单词指定
颜色=皉ed";//设置填充颜色
上下文。fillStyle=颜色;//设置边框颜色
上下文。strokeStyle=颜色; //指定线宽值
var值=https://www.yisu.com/zixun/3;//设置边框颜色
上下文。线宽=价值;
小编给大家分享一下H5的CanvasAPI如何绘制图形,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
帆布元素
以html下代码定义了一个帆布元素。
通过以下Javascript语句访问帆布元素:
2。基础API 2.1
坐标系统
帆布2 d渲染上下文采用平面笛卡尔坐标系统,左上角为原点(0,0),坐标系统的1个单位相当于屏幕的1个像素。
2.2.2线条
绘制线条与绘制图形有一些区别,线条实际上称为路径。要绘制一条简单的路径,首先必须调用beginPath方法,接着调用移至设置路径的起点坐标,然后调用画线设置线段终点坐标(可多次设置),再调用closePath完成路径绘制。最后调用中风绘制轮廓(或调用填填充路径)。以下为例子:
2.2.3圆形
帆布实际上并没有专门绘制圆形的方法,可以通过画圆弧来模拟圆形。由于圆弧是一种路径,所以画圆弧的API应该包含在beginPath和closePath之间。
2.3样式
2.3.1修改线条颜色
2.3.2修改线宽
2.4绘制文本
//指定字体样式
上下文。字体=?0 px黑斜体体“;
//在点(40、40)处画文字
context.fillText (“Hello world !“, 40岁,40);
