canvas
Posted 没入门的小学员
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas相关的知识,希望对你有一定的参考价值。
canvas
标签含义
- 用来定义图形,是一个容器,基于javascript的绘图脚本
使用
- 创建画布
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000"></canvas>
- 用javascript来绘制图像
//获取这个画布
var c=document.getElementById(‘myCanvas‘);
//创建context对象
var ctx=c.getContext(‘2d‘);
//填充色
ctx.fillStyle="#FF0000";
//(x,y,width,height),用这个红色的举行填充
ctx.fillRect(0,0,150,75)
- 路径
- 直线
- moveTo(x,y):定义线条开始坐标
- lineTo(x,y):定义线条结束坐标
- stroke():填充这条线
- 直线
var c=docuemnt.getElementById("myCanvas");
var ctx=c.getContext(‘2d‘);
ctx.moveTo(0,0,);
cyx.lineTo(200,200);
ctx.stroke()
- 圆形
- arc(z,y,r,start,stop)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//2*Math.PI是弧长,表示整个圆
ctx.arc(0,0,10,0,2*Math.PI)
str.stroke();
//填充色,默认黑色
str.fill()
- 文本
- 属性和方法
- font:定义字体
- fillText:绘制实心的文本
- strokeText:绘制空心文本
- 属性和方法
var c=document.getElementById(‘myCanvas‘);
var ctx=c.getContext(‘2d‘);
ctx.font(‘30px Arial‘);
ctx.fillText()
- 渐变
- createLinearGradient(x,y,x1,y1):线性渐变
- createRadialGradient(x,y,x1,y1):径向渐变
- addColorStop():指定颜色停止参数可以是0-1
var c=document.getElementById(‘myCanvas‘);
var ctx=c.getContext(‘2d‘);
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,‘red‘);
grd.addColorStop(1,‘white‘);
//制定填充的颜色
ctx.fillstyle=grd;
//制定填充的位置
ctx.fillRect(10,10,150,80)
- 图像
- draw image(image,x,y)
以上是关于canvas的主要内容,如果未能解决你的问题,请参考以下文章
HTML5 Canvas 支持和 Android Webview