canvas基础
1.什么是canvas
h5新增元素,可通过js中的脚本来绘制图形
使用标签来定义一个canvas元素,使用这个标签时建议成对出现,不要使用闭合形式(考虑兼容)
canvas默认具有宽高width:300px;height:150px;
2.替换内容
标签中提供替换内容,不支持canvas的浏览器就会显示内容,而支持canvas标签的浏览器就会忽略标签中的内容
3.标签只有两个属性:width 和height(canvas默认具有宽高width:300px;height:150px;)
画布的高宽:
html中设置height,width只影响画布本身、不影响画布内容
css里设置不但会影响画布本身高宽,还会使画布中内容等比例缩放
4.渲染上下文
元素只是创造了一个固定大小的画布,要想画内容,需要用js,首先找到他的渲染上下文(用元素的getContext()的方法,它只有一个参数,上下文的格式)
-----获取方式:
var canvas = document.getElementById(“box”)
var ctx = canvas.getContext(“2d”)
-----检查支持性
var canvas = document.getElementById(“box1”)
if(canvas.getContext){
var ctx = canvas.getContext(“2d”)
}
canvas画矩形
canvas只支持原生的图形绘制,所有其他图形绘制都需要生成一条路径
1找到 canvas 元素:
var c=document.getElementById(“myCanvas”);
2创建 context 对象:
var ctx=c.getContext(“2d”);
getContext(“2d”) 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
3.画矩形: //不加单位
ctx.fillRect(0,0,20,20);
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
4.带边框的矩形:
ctx.strokeRect(20,20,20,20) //边框会渲染到19.5和20.5之间(按理说边框是1px但是canvas渲染时边框宽度是评分到两侧的)(浏览器是不会让一个像素只用自己一半的,所以相当于边框会渲染到9和11之间)
5.添加样式和颜色
ctx.fillStyle="#FF0000"; //设置填充样式属性可以是CSS颜色,渐变,或图案。fillStyle、strokeStyle 默认设置是#000000(黑色)。
ctx.strokeStyle = “blue” //设置边框样式
ctx.lineWidth = 10 //绘制的线的粗细 ,必须是正数,不加单位 (线会往外扩,覆盖渲染)
6.ctx.lineJoin = “round”(圆角)||“bevel”(斜角)||“miter”(直角,默认)
设定线条与线条间接合的方式 (边框)
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
body{
background-color: #808080;
}
#test{
background-color: indianred;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
</style>
</head>
<body>
<canvas id="test" width="" height=""></canvas>
<script type="text/javascript">
window.onload=function(){
var test=document.querySelector("#test")
var ctx = test.getContext(