canvas API

1.1 cnavas的基本设置

canvas的width和height一定要写在标签中;如果用js设置宽高,写在私有属性上,不是style.width;否则会拉伸变形
<canvas width='800px' height='500px'></canvas>

1.2 绘制基本结构

//得到标签
let canvas=document.getElementById('canvas');
//上下文:提供一个2D画布,以后所有设置都是针对上下文来进行设置的;
let ctx=canvas.getContext('2d');//今后绘制的图形,图片都是使用ctx,而不是canvas这个对象;
ctx.style.border='1px solid #000';
//设置canvas的边框
ctx.beginPath();
//开始绘制
ctx.fillRect(100,0,200,200)

1.3 填充和描边

canvas中基本形状是线,矩形,弧。
绘制东西,分为两种:一种叫填充fill; 一种叫描边stoke;
好了,我们开始绘制吧!

let canvas=document.getElementById('canvas');
let ctx=canvas.getContext('2d');

线

ctx.beginPath();//开始绘制
ctx.moveTo(50,50);//起始坐标
ctx.lineTo(100,200);//绘制线的路径,可以是多个
ctx.lineTo(400,100);
ctx.closePath();//绘制的结束坐标
ctx.strokeStyle='red';//设置线的颜色,一定要设置线的宽度,否则看不到,且在画线之前设置
ctx.lineWidth=10;//设置线的宽度
ctx.stroke();//绘制线
//填充
ctx.fillStyle='pink';
ctx.fill();//fill()方法一定要在最后

矩形

有两种写法,以下:

ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.stroke();
ctx.fill();
ctx.strokeRect(50,50,100,100);
ctx.fillRect(20,20,150,150);

插入图片

drawImage(img,x,y,w,h,dx,dy,dw,dh);
img:图片; x,y:切片在ps中的位置; w,h:切片在ps中的宽高; dx,dy:切片在画布中的位置; dw,dh:切片在画布中的宽高;

//1.创建图片对象
var img=new Image;
//2.发送图片地址请求
img.src='xxx.jpg';
//3.在画布上展示图片:注意一定要图片加载成功再展示
img.onload=function(){
  drawImage(img,x,y,w,h,dx,dy,dw,dh);
}

推荐阅读更多精彩内容

  • 变形 在了解变形之前,先了解状态。 状态 canvas 的状态就是当前画面应用的所有样式和变形的一个快照,用来操作...
    Sachie阅读 387评论 0 0
  • Canvas API:可以动态生成和展示图形、图表、图像以及动画。不需要将所绘制图像中的每个图元当作对象存储,因此...
    linda102阅读 736评论 0 0
  • 首先我们来了解以下canvas标签: canvas是HTML5新增的标签,用于在网页上实时生成图像。 canvas...
    SkyNet_Z阅读 601评论 2 0
  • 八、Canvas 文本 context 对象的文本绘制功能由这两个函数组成:fillText(text, x,y,...
    linda102阅读 227评论 0 0
  • 今天物理老师说孩子的作业完成的不是很好,我回来问了孩子一下情况。也没有很生气,只是告诉他。下次要注意。放学回来扔就...
    宝贝有你真好阅读 205评论 0 2
  • 1. New European payments regulation has the potential to ...
    Echooos阅读 202评论 0 0
  • 当你发现别人比你努力的时候,你才会发现自以为是的你的努力如此不值得一提。更何况你只是自以为是。
    帅气的与温柔阅读 121评论 0 0
  • 这天是农历正月十五,元宵节。街上到处洋溢着节日的气氛,我也早早醒来,忘望着天花板发呆,我并不是因为节日兴奋,而是心...
    追逐晨风阅读 131评论 0 0