共计 2084 个字符，预计需要花费 6 分钟才能阅读完成。
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);
仅用于个人学习使用