convas-html绘制图像基本属性

<canvas></canvas>是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。

<canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在<canvas>>元素上绘图主要有三步：

获取<canvas>元素对应的DOM对象，这是一个Canvas对象；
调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；
调用CanvasRenderingContext2D对象进行绘图。

html中添加<myCanvas>标签,标签内无法绘制,必须使用js

设置convas-html绘制图像的基本属性

画板
var c=document.getElementById("myCanvas");

画笔(绘制颜色) var ctx=c.getContext("2d"); 橡皮擦 ctx.clearRect(x, y, w, h);

颜色ctx.fillStyle="#FF0000";

填充颜色 ctx.fillRect(0,0,150,75); ctx.stroke(); ctx.strokeStyle='#f66';

确定矩形区域然后执行ctx,fill()/ctx.stroke() ctx.rect(x, y, w, h);

圆弧
ctx.arc(x, y, r,atartAng, endAng,[bool]); 坐标,半径,开始,结束点,可变参数

直线,m与l的区别是,两个l起始点固定,m,l可以改变起始点 ctx.moveTo(x1,y1); ctx.lineTo(x2,y2);

扫描二维码关注公众号，回复： 7032195 查看本文章

曲线-贝塞尔曲线,需要有三个点 ctx.bezierCurveTo(x1, y1, cx, cy, x2, y2); 开始点坐标,控制点坐标,结束点坐标

二次绘制贝塞尔曲线 ctx.quadraticCurveTo(cx, cy, x3, y3); 上一个点的坐标为起始点,控制点和终止点

线条的粗细 ctx.linewidth=10;
ctx.lineCap = "butt/round/square";
线条属性:霸占,方
ctx.lineJoin = "miter/bever/round"; 线条连接处样式:尖的/圆的/

文字 ctx.font = "italic 30px 微软雅黑"; 字体样式顺序不能改,粗细,大小,样式

对齐方式
ctx.textBaseline = "top"
实心字 ctx.fillText(str, x, y);
空心字 ctx.strikeText(str, x, y);
图像

let img = new Image(); 
img.src = ''; 
img.onLoad = fuction () { 
ctx.drawImage(img, x, y
); 
ctx.drawImage(img, x, y, w, h); // 把图放在哪个位置,放多大 
ctx.drawImage(img, ox, oy, ow, oh, cx, cy, cw, ch); // o原图的位置大小,c截取原图的一部分,放到canvas,确定宽高 }

canvas动画转换类似---css转换 translate/rotate/skew/scale ctx.translate(x, y);
以原点为中心,旋转一定的角度,正值为顺时针,负值为逆时针ctx.rotate(Manth.PI * x)

之前的一个单位到现在的2个单位(2倍)ctx.scale(2)
动画

//动画 
setInterval(() => { 
// 绘制方法
},2000)

convas-html绘制图像基本属性

设置convas-html绘制图像的基本属性

猜你喜欢