H5学习的第二天

最新推荐文章于 2022-09-26 15:04:26 发布

qtskyll

最新推荐文章于 2022-09-26 15:04:26 发布

阅读量229

点赞数

分类专栏：学习笔记

学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!--绘制圆形的demo-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>画圆</title>
</head>
<body>
     <canvas id="canvas"></canvas>
       <script type="text/javascript">
           var canvas = document.getElementById('canvas');
           canvas.width=800;//设置画布的宽度
           canvas.height=800;//设置画布的高度
           var context=canvas.getContext('2d');//获取画布的上下文环境
           context.beginPath();
           //设置填充色
           context.fillStyle="red";
           /*创建一个圆形区域*/
           context.arc(100,100,50,0,2*Math.PI);
           context.fill();//填充
           context.stroke();//绘制图形
     </script>
</body>
</html>

绘制圆角矩形

 <script type="text/javascript">               
                context.beginPath();
		context.arc(410,410,10,Math.PI,1.5*Math.PI);//
		context.lineTo(600,400);
		context.arc(600,410,10,1.5*Math.PI,2*Math.PI);
		context.lineTo(610,600);
		context.arc(600,600,10,0,0.5*Math.PI);
		context.lineTo(410,610);
		context.arc(410,600,10,0.5*Math.PI,Math.PI);
		context.lineTo(400,410);
		context.stroke();
               /*另外一个方法绘制圆角矩形 */
               context.beginPath();
		context.moveTo(100,80);
		context.lineTo(400,80);
		context.arc(400,100,20,1.5*Math.PI,0);
		context.lineTo(420,300);
		context.arc(400,300,20,0,0.5*Math.PI);
		context.lineTo(100,320);
		context.arc(100,300,20,0.5*Math.PI,1.0*Math.PI);
		context.lineTo(80,100);
		context.arc(100,100,20,1.0*Math.PI,1.5*Math.PI);
		context.stroke();
</script>

方法arcTo

context.arcTo(x1,y1,x2,y2,radius);

arcTo函数仍然是绘制一个圆弧，他是把当前点作为起始点与(x1,y1)(x2,y2)形成一个直角切线。结束点不一定是x2，y2

二次贝塞尔曲线

context.moveTo(x0,y0);

context.quadraticCurveTo(x1,y1,x2,y2);

其中有一个点作为控制点可以任意拉伸变换图形

 <script type="text/javascript">
                context.moveTo(100,100);
		context.quadraticCurveTo(200,200,100,300);
		context.quadraticCurveTo(250,200,100,100);
		context.stroke();
</script>

三次贝塞尔曲线

有两个控制点可以控制曲线的变化，可以变幻出波浪的图形

context.moveTo(x0,y0);

context.bezierCurveTo(x1,y1,x2,y2,x3,y3);

(x1,y1)(x2,y2)是其中的两个控制点

文字渲染

canvas不仅可以绘制绚丽的图形，还能写上文字进行渲染

<script type="text/javascript">
     var canvas = document.getElementById('canvas');
    canvas.width=800; 
    canvas.height=800;
    var context = canvas.getContext('2d');
   //设置文字渲染的字体格式
    context.font="bold 30px Arial";
    context.fillStyle="yellow";
    context.fillText("里头是字符串内容",100,100);//起始点位置100，100当中开始写文字
 </script>

设置线性渐变样式

设置线性渐变的过程如下

1.先用context.createLinearGradient(起始点，终止点)；

2.增加颜色过渡点 addColorStop(0-1之间的小数，颜色值)；

3.把设置好的线性填充色样式给我们的填充样式

<script type="text/javascript">
     var canvas = document.getElementById('canvas');
    canvas.width=800;
    canvas.height=800;
    var context = canvas.getContext('2d');
     /*设置渐变样式*/
     var grad = context.createLinearGradient(100,100,600,100);
   //增加停止的颜色
   grad.addColorStop(0.0,"yellow");
   grad.addColorStop(0.5,"red");
   grad.addColorStop(0.75,"blue");
   grad.addColorStop(0.9,"pink");
   //把线性渐变的样式给Context.fillStyle填充样式
    context.fillStyle=grad;
    context.fillText("里头是文字渲染的效果"，100，100);
   //获取文字文本的长度
   var textWidth=context.measureText("里头是文字渲染的效果").width;
   context.fillText("文本的长度是"+textWidth+"px");
<script>

fillText(String,x,y,maxlen)和strokeText(String,x,y,maxlen);可以使用maxlen来设置填充的渲染文字的宽度

使用图片填充样式的方法

1.首先定义一个图片对象

 var backgroundImg = new Image();

backgroundImg.src="timg.jpg"//设置图片的路径

backgroundImg.οnlοad=function(){

     /*当图片加载完成后进行处理*/

}

2.在function()方法体内设计生成填充的样式

var pattern =context.context.createPattern(backgroundImg,"repeat");

context.fillStyle=parrtern;//设置填充样式

contex.fillText("canvas",100,100);

设置font字体的样式

context.font="font-style font-variant font-weight font-size font-family"

font-style：默认值是normal 此外还可以设置两种斜体 italic 斜体字 oblique倾斜字体目前两种倾斜方式没有什么特别的区别

font-varient:normal

small-caps以一种字体相对较小的大写字母来展示小写字母

Canvas 变成 CANVAS

font-weight:属性值lighter normal bold bolder 从纤细的字体变成比较粗的字体。

font-size设置字体的大小

font-size 20px 2erm 200%

font-family 支持多种字体比如宋体、黑体

文本对齐的方式：

context.textAlign=left；文本的横向对齐基准线在字体的左侧

context.textAlign=right; 文本的横向对齐基准线在字的右侧

context.textAlign=center 文本的基准线在字的中间

纵向对齐方式

context.textBaseline=top 文本的纵向对齐方式文本的基准线在文字的上方

context.textBaseline=middle文本的基准线在文字的中间

context.textBaseline=bottom 文本的基准线在文字的底部

context.textBaseline = alphabetic 拉丁字母的语言效果就是写英文作文那样出现在基准线的上面紧挨着

context.textBaseline=ideographic 基于方块的文字比拉丁字母的语言稍微往上平移一点，可以看出有更大的空间

context.textBaseline=hanging 印度语在基准线的下面

制作阴影效果

context.shadowColor 设置阴影的颜色

context.shadowOffsetX设置x轴偏移

context.shadowOffsetY设置y轴偏移

context.shadowBlur设置阴影的颜色的模糊程度 0表示不模糊，值越大越模糊

示例代码如下

<script type="text/javascript">
    var canvas = document.getElementById();
    canvas.width=800;
    canvas.height=800;
    var context= canvas.getContext('2d');
    //设置图形的填充样式颜色为红色
    context.fillStyle="red";
    //设置阴影的颜色为绿色
    context.shadowColor="green";
    //设置x轴方向的偏移量为10表示阴影位置在右边，也可以设置为负值则阴影部分在左边
    context.shadowOffsetX=10;
   //设置阴影在y轴方向的偏移量
    context.shadowOffsetY=10;
   //设置阴影的颜色模糊程度值越大，颜色越模糊
    context.shadowBlur=10;
</script>

qtskyll

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5学习的第二天

画圆 var canvas = document.getElementById('canvas'); canvas.width=800;//设置画布的宽度 canvas.height=800;//设置画布的高度 var context=canvas.getContext(
复制链接

扫一扫