H5的CanvasAPI怎样绘制图形

互联网 18-1-9

这次给大家带来H5的CanvasAPI怎样绘制图形，怎么用Canvas制作图形？Canvas制作图形的注意事项有哪些，下面就是实战案例，一起来看一下。

<!DOCTYPE html>    <html>    <head>        <title>Canvas快速入门</title>        <meta charset="utf-8"/>    </head>    <body>    <div>        <canvas id="mainCanvas" width="640" height="480"></canvas>    </div>    </body>    </html>

通过以下Javascript语句访问canvas元素：

//DOM写法     window.onload = function () {         var canvas = document.getElementById("mainCanvas");         var context = canvas.getContext("2d");     };     //jQuery写法     $(document).ready(function () {         var canvas = $("#mainCanvas");         var context = canvas.get(0).getContext("2d");     });     //接下来就可以调用context的方法来调用绘图API

2. 基础API2.1 坐标系统Canvas 2D渲染上下文采用平面笛卡尔坐标系统，左上角为原点(0,0)，坐标系统的1个单位相当于屏幕的1个像素。

//绘制一个填充矩形     context.fillRect(x, y, width, height)     //绘制一个边框矩形     context.strokeRect(x, y, width, height)     //清除一个矩形区域     context.clearRect(x, y, width, height)

//示例     context.beginPath();    //开始路径     context.moveTo(40, 40);    //移动到点(40,40)     context.lineTo(300, 40);    //画线到点(300,30)     context.lineTo(40, 300);    //画线到点(40,300)     context.closePath();    //结束路径     context.stroke();    //绘制轮廓     //或者填充用context.fill();

2.2.3 圆形Canvas实际上并没有专门绘制圆形的方法，可以通过画圆弧来模拟圆形。由于圆弧是一种路径，所以画圆弧的API应该包含在beginPath和closePath之间。2.3 样式2.3.1 修改线条颜色

var color;     //指定RGB值     color = "rgb(255, 0, 0)";     //指定RGBA值（最后一个参数为alpha值，取值0.0~1.0）     color = "rgba(255, 0, 0, 1)";     //指定16进制码     color = "#FF0000";     //用单词指定     color = "red";     //设置填充颜色     context.fillStyle = color;     //设置边框颜色     context.strokeStyle = color;

2.3.2 修改线宽

//指定线宽值     var value= 3;     //设置边框颜色     context.linewidth = value;

2.4 绘制文本

//指定字体样式

context.font = "italic 30px 黑体";

//在点(40,40)处画文字

context.fillText("Hello world!", 40, 40);

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

H5的CanvasAPI怎样绘制图形

相关资讯

标签推荐