<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>画布</title>
<style type="text/css">
</style>
</head>
<body>
<canvas id="first" width="800" height="800">浏览器不支持</canvas>
<script type="text/javascript">
var c=document.getElementById("first");
var p100=c.getContext("2d");
p100.fillStyle="#FF0000";
p100.fillRect(100,100,300,300);
//定义矩形
p100.fillStyle="rgba(0,0,255,0.5)";//定义颜色(支持透明度)
p100.fillRect(200,200,500,500);//定义矩形的大小
//画线
p100.moveTo(10,10);//起始位置
p100.lineTo(150,50);//终止位置
p100.lineTo(10,80);//如果没有再次起始位置将从结束位置开始画
p100.stroke();//结束图形
//画圆
p100.fillStyle="rgba(0,125,126,0.3)";//定义演示
p100.beginPath();//重新开始画,防止冲突重叠
p100.arc(200, 200, 80, 0, Math.PI*2, true)//x坐标,y坐标,半径长度 开始角度,结束角度,
p100.closePath();//结束画布,防止冲突重叠
p100.fill();//结束渲染
//颜色渐变
var grd=p100.createLinearGradient(100, 100, 175, 50);//颜色渐变的其实坐标和终点坐标
grd.addColorStop(0,"yellow");//0表示起点0.1 0.2 0.3 ...1表示终点,配置颜色;
grd.addColorStop(0.3,"red");
grd.addColorStop(0.6,"silver");
grd.addColorStop(0.8,"orange");
grd.addColorStop(1,"cyan");
p100.fillStyle=grd;//生成的颜色块赋值给样式
p100.fillRect(100, 100, 175, 50);//设置色块(注意色块要和矩形相同);
//载入图片
var img=
</script>
</body>
</html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>画布</title>
<style type="text/css">
</style>
</head>
<body>
<canvas id="first" width="800" height="800">浏览器不支持</canvas>
<script type="text/javascript">
var c=document.getElementById("first");
var p100=c.getContext("2d");
p100.fillStyle="#FF0000";
p100.fillRect(100,100,300,300);
//定义矩形
p100.fillStyle="rgba(0,0,255,0.5)";//定义颜色(支持透明度)
p100.fillRect(200,200,500,500);//定义矩形的大小
//画线
p100.moveTo(10,10);//起始位置
p100.lineTo(150,50);//终止位置
p100.lineTo(10,80);//如果没有再次起始位置将从结束位置开始画
p100.stroke();//结束图形
//画圆
p100.fillStyle="rgba(0,125,126,0.3)";//定义演示
p100.beginPath();//重新开始画,防止冲突重叠
p100.arc(200, 200, 80, 0, Math.PI*2, true)//x坐标,y坐标,半径长度 开始角度,结束角度,
p100.closePath();//结束画布,防止冲突重叠
p100.fill();//结束渲染
//颜色渐变
var grd=p100.createLinearGradient(100, 100, 175, 50);//颜色渐变的其实坐标和终点坐标
grd.addColorStop(0,"yellow");//0表示起点0.1 0.2 0.3 ...1表示终点,配置颜色;
grd.addColorStop(0.3,"red");
grd.addColorStop(0.6,"silver");
grd.addColorStop(0.8,"orange");
grd.addColorStop(1,"cyan");
p100.fillStyle=grd;//生成的颜色块赋值给样式
p100.fillRect(100, 100, 175, 50);//设置色块(注意色块要和矩形相同);
//载入图片
var img=
</script>
</body>
</html>