canvals

1,canvas 1本身就是h5的一个标签,该标签用来在html页面中圈出一块区域用来作为画布绘制图形,
2,兼容性:
如果浏览器不支持canvas标签,则会把该标签中的文本显示出来 ie8及之前的浏览器不支持
3,在设置画布尺寸时必须使用标签下的width和height属性,不能用css样式
<canvas id = 'canvas',width = 500px''height = '500px'>
你的浏览器不支持这个标签
</canvas>
开始绘制啦
//首先要获取到canvas标签
var canvas = document.querySelector('#canvas')
//创建画笔
var ctx= canvas.getContext('2d')
//调用beginPath()开始绘制
ctx.beginPath();
//设置绘画的起始点
ctx.moveTo(100,100)
//设置绘画的经过点,最后一个坐标就是终点坐标
ctx.lineTo(200,200)
ctx.lineTo(300,100);
//用closePath()把起始点和终点连接起来
ctx.closePath()
//调用绘制方法绘制图案
ctx.strokeStyle = 'red'//改线框颜色的属性,在调用stroke()前有效
ctx.lineWidth = 10;//修改线框粗细的属性
ctx.lineCap='round';//修改线框两端的样式
ctx.lineJoin='round';//修改途经点的交点样式
ctx.shadowColor='gray';
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
ctx.shadowBlur=5;
ctx.stroke();//用来描边的
// 在调用fill()方法前设置填充样式
ctx.fillStyle='red';
ctx.fill();//用来填充的

//绘制矩形
var can=document.querySelector('#canvas');
var ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle='red';
ctx.strokeRect(10,10,100,300);
ctx.fillStyle='red';
// x,y,w,h
ctx.fillRect(150,50,100,300);
ctx.fillRect(50,150,300,100);
//绘制弧线
x,y,r,startAngle,endAngle,direction
//贝塞尔曲线
//清理画布
//定时器动画
requestAnimationFrame()h5提供的浏览器方法,由window调用,该方法接受一个函数作为参数,通过递归或者死循环让函数中的代码会被反服执行,该方法控制函数执行频率是显示器的刷新频率
function run() {
ctx.clearRect(0,0,500,500);
// 绘制新的一帧
x1+=speedX;
y1+=speedY;
ctx.beginPath();
ctx.arc(x1,y1,50,Math.PI/1800,Math.PI2,false);
ctx.stroke();
window.requestAnimationFrame(run);//控制执行时机
if (x1>=canvas.width-50) {
speedX=-1;
}
if (y1>=canvas.height-50) {
speedY=-1;
}
}
run();

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 3,867评论 2 29
  • 啥是canvas? HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。不过, 元素本身...
    kiaizi阅读 515评论 0 4
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 2,996评论 3 40
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 1,070评论 0 4
  • 风 夏天 你曾轻拂过大地 悄然带走大地的炎热 又轻拂过遍地野草 毅然带走了草尖的甘露 秋天 风 你轻拂过谷粒 静静...
    残晓阅读 59评论 0 2
  • 1, 昨天,学校分发贫困生补助费,来领费用的学生家长大都怀着感恩之心,向老师、校长表示感谢。 确实,能申报贫困生补...
    青青小园阅读 256评论 0 2
  • 今晚有幸观摩了这场中国民族打击乐的演出,第一次观看以打击乐为专题的音乐会(好像以前学院曾有这样的演出,但因为...
    韫左寻阅读 208评论 0 2