-
function draw(compositeStyle){ var canvas=document.getElementById('canvas'); canvas.width=1200; canvas.height=800; var context=canvas.getContext('2d'); context.clearRect(0,0,canvas.width,canvas.height); //draw title context.font='bold 40px Arial'; context.textAlign='center'; context.textBaseline='middle'; context.fillStyle='#058'; context.fillText('globalCompositeOperation='+compositeStyle,canvas.width/2,60); //draw rect context.fillStyle='blue'; context.fillRect(300,150,500,500); //draw triangle context.globalCompositeOperation=compositeStyle; context.fillStyle='red'; context.beginPath(); context.moveTo(700,250); context.lineTo(1000,750); context.lineTo(400,750); context.closePath(); context.fill(); }查看全部
-
globalCompositeOperation查看全部
-
globalAlpha: 全局透明度 globalAlpha=1(默认)查看全部
-
设置canvas的阴影 context.shadowColor="颜色值"；//阴影颜色值，可以为任何颜色的表现形式 context.shadowOffsetX=value1;//水平方向的偏移，值可以为负值，负值则方向相反 context.shadowOffsetY=value2;//垂直方向的偏移，值可以为负值，负值则方向相反 context.shadowBlur=value3;//阴影模糊程度，正比例增加查看全部
-
文本的度量：context.measureText(string).width查看全部
-
alphabetic(default) | ideographic | hanging 对应下面三个：分别表示拉丁文的垂直方向基准线、日语中文等方块字的垂直方向基准线、印度文的垂直方向基准线。查看全部
-
文字垂直对齐 context.textBaseline=top | middle | bottom | alphabetic(default) | ideographic | hanging 是根据context.fillText(string,x,y)中的y值进行上对齐、下对齐或居中的。 **后面三个分别表示拉丁文的垂直方向基准线、日语中文等方块字的垂直方向基准线、印度文的垂直方向基准线。查看全部
-
水平对齐 context.textAlign=left | center | right 是根据context.fillText(string,x,y)中的x值进行左对齐、右对齐或居中的。查看全部
-
font-style: normal(默认)/italic(斜体字)/oblique(倾斜字体) font-variant:normal(默认)/small-caps(只要在使用英文小写字母时才能看出区别，以一种小型的大写字母形式显示小写字母) font-weight:lighter/normal(默认)/bold/bolder,,也可以使用数字设置：100,200,300,400(默认),500,600,700(bold)，800,900 font-size:px(默认，如20px)/em(如2em)/百分比%(如150%)，也可以使用以下属性值进行设置：xx-small, x-small, medium, large, x-large, xx-large font-family:可以设置多种字体备选；支持@font-face；web安全字体查看全部
-
文字渲染查看全部
-
另一种圆弧查看全部
-
圆角矩形查看全部
-
圆弧的画法查看全部
-
变换矩阵默认值查看全部
-
绘制矩形查看全部
举报
0/150
提交
取消