canvas基础知识
canvas是什么？
举个栗子：
第一步：在页面中引入canvas标签，并且设置好宽高背景等样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#canvas{
background-color: #ddd;
border: 2px solid black;
display: block;
margin: 30px auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="400">
Canvas not supported 你的浏览器不支持canvas
</canvas>
</body>
</html>
注意：
第二步：添加javascript代码
<script type="text/javascript">
window.onload = function(){
//获取到canvas对象
var oCanvas = document.getElementById("canvas");
//获取到canvas的绘图环境
var oContext = oCanvas.getContext("2d");
//设置字体大小和字体类型
oContext.font = "48px sans-serif";
//设置填充的颜色
oContext.fillStyle = "cornflowerblue";
//设置描边的颜色
oContext.strokeStyle ="black";
//填充字体 使用到的颜色是 通过 fillStyle设置的颜色 ，第一个参数是填充的文本内容 第二个参数表示 开始填充的横坐标 第三个参数表示开始填充的纵坐标
oContext.fillText("Hello world!",oCanvas.width/2-160,oCanvas.height/2);
//描边 使用到的颜色是 通过 strokeStyle设置的颜色 参数和 fillStyle一样
oContext.strokeText("Hello world!",oCanvas.width/2-160,oCanvas.height/2);
}
</script>
注意:
运行结果：
最佳实践
2d绘图环境
canvas : 指向该绘图环境所属的canvas对象
fillstyle : 指定改绘图环境后续的图形填充操作中所使用的颜色、渐变或图案
font : 设置字型
globalAlpha : 全局透明度设定
globalCompsiteOperation : 将某个物体绘制到其他物体之上时的绘制方式
lineCap : 绘制线段的端点
lineWidth : 绘制线段的宽度
lineJoin: 绘制两条线段相交时的焦点
miterLimit : 绘制miter形式线段的焦点
shadowBlur : 延伸的阴影效果
shadowColor : 阴影颜色
shadowOffsetX : 阴影水平偏移量
shadowOffsetY : 阴影垂直方向偏移量
strokeStyle : 对路径进行描边时所用的绘制风格
textAlign : 文本水平对齐方式
textBaseline : 文本垂直对齐方式
//获取到canvas对象
var oCanvas = document.getElementById("canvas");
//获取到canvas的绘图环境
var oContext = oCanvas.getContext("2d"); console.log(oContext)
坐标系统
关注微信更多学习资料分享
欢迎转载分享，请注明出处！