最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

canvas学习总结

XAMPP相关 admin 46浏览 0评论

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);
仅用于个人学习使用

转载请注明:XAMPP中文组官网 » canvas学习总结