html5中画布的实现演示

最新推荐文章于 2021-10-27 04:05:19 发布

uniquewdl

最新推荐文章于 2021-10-27 04:05:19 发布

阅读量1.3k

点赞数 1

分类专栏： web开发文章标签： html5 canvas

本文链接：https://blog.csdn.net/uniqueweimeijun/article/details/51261804

版权

web开发专栏收录该内容

145 篇文章 1 订阅

订阅专栏

<!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>