canvas学习总结

canvas

描述

HTML5 < canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过,< canvas>元素本身并没有绘制能力（它仅仅是图形的容器）-必须使用脚本来完成实际的绘图任务。

getContent()方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。

浏览器支持情况

Internet Explorer 9、Firefox、Opera、Chrome以及Safari支持< canvas>及其属性和方法。(Internet Explorer 8以及更早的版本不支持< canvas>元素)

1.canvas设置height、width

1.通过html设置

<canvas id="canvas" width="400" height="400"></canvas>

2.通过js设置

<canvas id="canvas"></canvas>
<script>
var canvas=document.getElementById('canvas');
var cx=canvas.width=400;
var cy=canvas=height=400;
</script>

3.通过css设置

<canvas id="canvas"></canvas>
<style>
#canvas{
    width:400px;
    height:400px;
}
</style>
//使用css来设置宽高的画,画布就会按照300*150的比例进行缩放,也就是将300*150的页面显示在400*400的容器中

所以尽量使用HTML的width和height属性或者直接使用js动态设置宽高,不要使用css设置。

获取Canvas对象

创建好canvas标签后就要获取Canvas对象

<canvas id="canvas"></canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');//可在画布上绘制文本、线条、矩形、圆形。
</script>

在画布上绘制圆

创建画布

<canvas id="canvas" width="400" height='400'></canvas>

使用arc()画圆

var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.beginPath()//起始一条路径或重置当前路径
context.arc(90,90,50,Math.PI*2,false)// arc(x,y,r,start,stop)
context.strokeStyle="green"//设置或返回用于笔触的颜色、渐变或模式。
context.stroke()//绘制已定义的路径。

在画布上线条

创建画布

<canvas id="canvas" width="400" height="400"></canvas>

使用moveTo()定义线条开始坐标,lineTo()线条结束坐标

var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.beginPath();
var grd=context.createLinearGradient(0,0,170,0);//createLinearGradient(x0,y0,x1,y1);创建线性渐变对象
grd.grd.addColorStop(0,"green");//规定渐变对象中的颜色和停止位置。
grd.addColorStop(1,"white");
context.moveTo(10,10);
context.lineTo(100,100);
context.lineCap="round"//定义设置或返回线条的结束端点样式 round圆形 butt默认 square方形
context.lineWidth=10//设置线条宽度
context.strokeStyle=grd
content.stroke()

绘制渐变文本

html

<canvas id="canvas" height="400" width="400"></canvas>

js

var canvas=document.getElementById('canvas');
var context=getContext('2d');
context.beginPath();
var grd=context.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"green");
grd.addColorStop(1,"white");
context.font="30px Arial"//设置或返回文本内容的当前字体属性。
context.fillStyle=grd
context.fillText("Hello World",10,50);

仅用于个人学习使用