canvas
描述
HTML5 < canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过,< canvas>元素本身并没有绘制能力（它仅仅是图形的容器）-必须使用脚本来完成实际的绘图任务。
getContent()方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
浏览器支持情况
Internet Explorer 9、Firefox、Opera、Chrome以及Safari支持< canvas>及其属性和方法。(Internet Explorer 8以及更早的版本不支持< canvas>元素)
1.canvas设置height、width
1.通过html设置
2.通过js设置
3.通过css设置
//使用css来设置宽高的画,画布就会按照300*150的比例进行缩放,也就是将300*150的页面显示在400*400的容器中
所以尽量使用HTML的width和height属性或者直接使用js动态设置宽高,不要使用css设置。
获取Canvas对象
创建好canvas标签后就要获取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()//绘制已定义的路径。 在画布上线条
创建画布
使用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=grdcontent.stroke() 绘制渐变文本
html
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=grdcontext.fillText("Hello World",10,50); 仅用于个人学习使用