html5网格坐标系,HTML5 Canvas 坐标系

一、使用 Canvas 绘制路径

moveTo(x,y) 定义线条开始坐标

lineTo(x,y) 定义线条结束坐标

使用 stroke() 方法来绘制线条

通过指定从何处开始，在何处结束，来绘制一条线，如下代码：

您的浏览器不支持HTML5 Canvas标签

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.moveTo(10,10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);

cxt.stroke();

二、使用 Canvas 绘制圆形

使用 beginPath() 方法来清除当前画布中存在的路径 并且 准备开始绘制新的路径

调用 arc() 方法，传入相应的参数

使用 stroke() 方法来绘制线条

通过给定参数来规定圆的尺寸、颜色和位置，代码如下：

您的浏览器不支持HTML5 Canvas标签

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(80,28,25,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

执行一下

三、使用 Canvas 实现渐变

渐变效果可以填充在矩形、圆形、线条、文本等画布元素中, 各种形状可以自己定义不同的颜色；渐变效果目前有两种：

createLinearGradient(x,y,x1,y1) - 创建线条渐变

createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

实现渐变的步骤和代码：

创建渐变对象(线性还是径向)

使用两种或两种以上的停止颜色来实现颜色渐变效果：addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1

应用渐变到画布元素中，设置画布上下文对象的 fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线

您的浏览器不支持HTML5 Canvas标签

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// 创建渐变

var grd=ctx.createLinearGradient(0,0,200,0); //线性

//var grd=ctx.createRadialGradient(75,50,5,90,60,100); //径向

grd.addColorStop(0,"blue");

grd.addColorStop(1,"white");

// 填充渐变

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

执行一下

四、使用 Canvas 绘制图像

获取或者创建 图像的dom对象

使用 drawImage 方法实现图像的绘制

把一幅图像放置到画布上代码如下：

您的浏览器不支持HTML5 Canvas标签

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

//创建图像的dom对象，第一种方法

var img=new Image();

img.src="/static/resource/img/logo.png";

//创建图片的dom对象，第二种方法

//var img= document.getElementById("img");

ctx.drawImage(img,0,0);

执行一下

五、使用 Canvas 绘制文本

使用 font  属性来定义字体

使用 fillText(text,x,y) 在 canvas 上绘制实心的文本

使用 strokeText(text,x,y) 在 canvas 上绘制空心的文本

使用 "微软雅黑" 字体在画布上绘制一个高 30px 的文字(实心或空心)，代码如下：

您的浏览器不支持HTML5 Canvas标签

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px 微软雅黑";

ctx.fillText("Hello World",10,50); //绘制实心文字

//ctx.strokeText("Hello World",10,50); //绘制空心文字

执行一下