您的位置：首页 > 其它
Canvas绘制图形图像

2016-11-11 00:00 232 查看
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//矩形
function drawRect(id)
{
var canvas = document.getElementById(id);
var content = canvas.getContext("2d");
content.fillStyle = "#FF0000";//定义填充色
content.fillRect(0,0,200,200);//定义起点0,0 宽200 高200
}
//线条
function drawLine(id)
{
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.moveTo(50,50);//定义线条起点
context.lineTo(100,50);//从起点开始移动
context.lineTo(50,50);//从上面的终点开始移动
context.stroke();
}

//三角形
function drawLineThree(id)
{
//获取Canvas对象(画布)
var canvas = document.getElementById(id);
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");

//开始一个新的绘制路径
ctx.beginPath();
//设置线条颜色为蓝色
ctx.strokeStyle = "blue";
//设置填充色
ctx.fillStyle = "red";
//设置路径起点坐标
ctx.moveTo(20, 50);
//绘制直线线段到坐标点(60, 50)
ctx.lineTo(20, 100);
//绘制直线线段到坐标点(60, 90)
ctx.lineTo(70, 100);
//先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。
ctx.closePath();
//填充颜色
ctx.fill();
//最后，按照绘制路径画出直线
ctx.stroke();
}

}

//圆
function drawArc(id)
{
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
//定义径向渐变色
var rg =context.createRadialGradient(50, 50, 0, 50, 50, 20);
rg.addColorStop(0,'red');
rg.addColorStop(0.5,'yellow');
rg.addColorStop(1,'blue');
context.fillStyle = rg;//定义填充色
context.beginPath();
/*cx  水平坐标
cy  垂直坐标
radius  半径
start-angel  圆周起始位置
end_angle  弧长 Math.PI是半圆  Math.PI*2是整个圆  0.5为四分之一
direction 顺、逆时针  false为逆时针，true为顺时针（决定了圆弧的方向）*/
context.arc(50,50,20,0,Math.PI*2,true);
context.closePath();
context.fill();
}

//横向渐变
function drawLinearGradient(id)
{
var c=document.getElementById(id);
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
}

//图像
function drawImg(id)
{
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
var img = new Image();
img.src = "1.png";
//html5在使用drawImage绘图的时候，出现不显示的问题，原来要想是图片正常显示需要为图片添加一个onload事件
img.onload = function(){
context.drawImage(img,100,100);
}
context.drawImage(img,100,100);
}

</script>
</head>
<body onload="drawRect('canvasid')">
<canvas id="canvasid" width="500" height="500"></canvas>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航