首页 > 代码库 > canvas
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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。