一、什么是Canvas？

二、Canvas元素的定义（写在html文件的body中）

三、使用JavaScript获取网页中的Canvas对象

四、Canvas绘图

（1）绘制直线

（2）绘制矩形

（3）绘制圆弧

（4）填充和描边

一、什么是Canvas？

canvas就是画布，可以画线，图形，填充，图像绘制等操作。

canvas不仅提供简单的二维矢量绘图，也提供三维绘图。

二、Canvas元素的定义（写在html文件的body中）

.............

</canvas>

id 是canvas元素的标识；
height是canvas画布的高度，单位为像素；
width是canvas画布的宽度，单位为像素。

三、使用JavaScript获取网页中的Canvas对象

获取对象的方法：document.getElementById(对象id)

获取canvas对象的2D绘图上下文：getContext（“2d”)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>canvas</title><style type="text/css">body {background-color: antiquewhite;}#canvas {background-color: bisque;margin-top: 100px;margin-left: 200px;}</style></head><body><canvas id="canvas" width="1000" height="500"><script>var mycanvas = document.getElementById('canvas');var context = mycanvas.getContext(‘2d’);....</script></canvas></body>
</html>

如图：body颜色为浅，画布颜色为深，圆圈圈住的为画布的（0,0）像素

四、Canvas绘图

（1）绘制直线

调用beginPath()方法，指示开始绘图路径： ctx.beginPath();
调用moveTo()方法将坐标移至直线起点： ctx.moveTo(x,y);
调用lineTo()方法绘制直线： ctx.lineTo(x,y);
调用stroke()方法，绘制图形的边界轮廓： ctx.stroke();
调用closePath()方法，指示闭合绘图路径: ctx.closePath();

注：x表示水平方向的像素点，y表示垂直方向的像素点，下图黑点用（x,y）表示成（4,3）

代码实例：

<script>var mycanvas=document.getElementById("canvas");var ctx=mycanvas.getContext("2d");ctx.beginPath();ctx.moveTo(100,200);ctx.lineTo(400,200);ctx.lineTo(250,400);ctx.closePath();ctx.strokeStyle="#000000";ctx.stroke();
</script>

效果如下图所示：

（2）绘制矩形

绘制矩形：rect(x,y,width,height)；

绘制矩形边框：strokeRect(x, y, width, height);

绘制填充矩形：fillRect(x, y, width, height);

擦除指定矩形区域：clearRect(x, y, width, height);

x:矩形左上角的X坐标；
y:矩形左上角的y坐标；
width:矩形的宽度；
height:矩形的高度

代码实例：

<script>var mycanvas=document.getElementById("canvas");var ctx=mycanvas.getContext("2d");//rect()函数调用ctx.beginPath();ctx.rect(20,20,100,50);ctx.stroke();//strokeRect()函数调用ctx.strokeRect(200,20,150,60);//fillRect()函数调用ctx.fillRect(400,20,150,60);
</script>

效果如下图所示：

注：strokeRect()方法与rect()方法的区别在于调用strokeRect()方法时不需要使用beginPath()和stroke()即可绘图。

（3）绘制圆弧

arc(centerx,centery,radius,startAngle,endAngle,antiClockwise);

centerx,centery 圆弧中心点坐标
Radius 半径
startAngle 起始弧度
endAngle 终止弧度
antiClockwise 是否按逆时针方向绘图，是一个可选参数，默认为false（即顺时针方向绘图）
弧度 = 角度* ( Math.PI / 180 )

代码实例：

<script>var mycanvas=document.getElementById("canvas");var ctx=mycanvas.getContext("2d");//arc()函数调用ctx.beginPath();ctx.arc(100,150,70,0,90*Math.PI/180,true);ctx.stroke();
</script>

效果如下图所示：

注：起始弧度到终止弧度是顺时针计算的

（4）填充和描边

1.描边

strokeStyle指定描边颜色（三种颜色方式均可）

lineWidth指定描边宽度（像素为单位）

2.填充

fillStyle指定填充颜色（三种颜色方式均可）

代码实例：

<script>var mycanvas = document.getElementById("canvas");var ctx = mycanvas.getContext("2d");ctx.moveTo(20, 20);ctx.lineTo(100, 100);ctx.lineTo(100, 0);ctx.strokeStyle = "#0000FF";ctx.stroke();ctx.beginPath();ctx.moveTo(120, 20);ctx.lineTo(200, 100);ctx.lineTo(200, 0);ctx.fillStyle = "pink";ctx.fill();
</script>

效果如下图所示：

由于ctx.strokeStyle = "#0000FF";（蓝色），ctx.fillStyle = "pink";（粉色）所以边框颜色是蓝色，填充颜色为粉色。

Canvas绘图基础相关推荐

Android中Canvas绘图基础详解（附源码下载）
看到了一篇比较详细的Canvas文章,转过来方便自己查看. 源地址:http://blog.csdn.net/iispring/article/details/49770651 Android中,如果 ...
Canvas绘图基础（一）
简单图形绘制矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) ...
java名片合成_HTML5 canvas绘图基础（电子名片生成器源码）
创建canvas 您的浏览器不支持canvas 基础设置 var canvas = document.getElementById('myCanvas');var ctx = canvas.getCo ...
前端使用Canvas绘图(基础知识)--持续更新中
文章目录前言 canvas文档一.canvas代码提示(插件和注释) 1.1.使用插件方式(推荐这种方式) =>canvas-snippets 1.2.使用注释方式二.初始canvas 2 ...
canvas绘图基础整理
Canvas学习一.熟悉一下: window.οnlοad=function(){ var a=document.getElementById("can"); //检测a.get ...
Android中Canvas绘图之Shader使用图文详解
概述我们在用Android中的Canvas绘制各种图形时,可以通过Paint.setShader(shader)方法为画笔Paint设置shader,这样就可以绘制出多彩的图形.那么Shader是什 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
【基于Leaflet和Canvas绘图的前端大量栅格数据渲染】
1. 需求有包含30万坐标点的json文件,每个坐标点包含经度.纬度.行值.列值.数值,现需要根据数值分级进行不同颜色的显示,并在地图的正确位置进行渲染.最终效果如下: 2. 环境和工具 2.1 使 ...
shader TileMap html的Canvas绘图缓动/反弹动作 unity
图解Charles抓包工具使用教程就是抓取返回的Data- -------------------------------------------------------shader 1 shade ...

Canvas绘图基础

一、什么是Canvas？

二、Canvas元素的定义（写在html文件的body中）

三、使用JavaScript获取网页中的Canvas对象

四、Canvas绘图

（1）绘制直线

（2）绘制矩形

（3）绘制圆弧

（4）填充和描边

Canvas绘图基础相关推荐

最新文章

热门文章