html学习_canvas

最新推荐文章于 2025-05-11 07:13:13 发布

leidar

最新推荐文章于 2025-05-11 07:13:13 发布

阅读量362

点赞数

CC 4.0 BY-SA版权

分类专栏：工具文章标签： html canvas 2d

本文链接：https://blog.youkuaiyun.com/qq_32209643/article/details/51137869

工具专栏收录该内容

17 篇文章

订阅专栏

本文介绍了 HTML Canvas 的基本使用方法，包括如何获取画布、绘图上下文及调整绘图参数。此外还讲解了如何绘制图形、文本、图像以及实现更高级的功能如变换、填充等。

html学习_canvas

基本功能

获取document对象 var canvas = document.getElementById("homework");
这个是在script代码外面定义的…
获取画布的上下文对象var context = canvas.getContext("2d");

调整参数

moveTo(x,y)调整绘图游标
lineTo(x,y)画一条线段到(x,y)

线的属性:

strokeStyle //颜色:"F00","FF0000","rgb(255,0,0,1)",red
lineWidth   //宽度,单位是像素
lineCap       //线段端点样式 "butt","round","square"
lineJoin  //拐弯样式 "miter","round","bevel"
lineDash()    //线型[实,虚]

文本属性

font  //(粗细)(倾斜)字体和大小 "30px 宋体"
font  //粗细(第一个变量) "lighter 30px 宋体" "normal" "bold" "bolder" 
font  //倾斜 "normal" "italic" "oblique"
textAlign //对齐方式 "start" "end" "left" "right" "center"
textBaseline//下划线位置"alphabetic""top""bottom""middle""hanging""ideographic"
measureText(Text)//测量文本宽度

stroke()描边或者fill()填充
- javascript fillStyle

<!DOCTYPE HTML>
<HTML>
<head>
    <title>canvas</title>
</head>

<body>
    <canvas id="homework" width="200" height = "200" style="border:solid 1px #CCC;"></canvas>

    <script type="text/javascript">
        var canvas  = document.getElementById("homework");
        var context = canvas.getContext("2d");

        //画一个封闭图形并填充
        function close()
        {
            context.beginPath();//预备工作
                context.moveTo(10, 10);
                context.lineTo(180, 90);
                context.lineTo(20, 80);
                context.closePath();//封闭
                context.fillStyle="red";
                context.fill();//可加参数
        }

            //写字...
            function writing(words)
            {
                //(text,x,y,maxWidth)
                context.font = "30px Arial";
                context.fillText(words  , 10, 75);//填充
                context.strokeText(words, 10, 150);//描边
            }
            ////矩形(x,y,width,height)
            function rect()
            {
                context.rect(20,20,150,80);
            context.stroke();
                context.strokeRect(20, 20, 60, 80);

                context.fillRect(30, 30, 150, 100);

                context.clearRect(50, 50, 80, 50)//擦除矩形
            }

            //圆弧
            function Arc(){
                var pi = Math.PI;
                var degToRad = pi/180;
                //arc(x,y,radius,startAngle,endAngle,antiClockwise);
                context.arc(100,70,50,0,90*degToRad,true);
                context.fill();
            }

    </script>

</body>
</HTML>

高级功能

绘制图像

context.drawImage(image， dx， dy， dw， dh)

context.drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,dx,dy,dw,dh);

var image = new Image();
image.src = "http://211.66.128.178/picSrc/课本图片/鱼.png";//可能要用英文名
image.onload = function(){
    context.drawImage(image,50,50);
}

像素操作

每一个像素对象保持1.长2.宽3.RGB+透明度

var imageData = context.createImageData(100, 100);     //创造对象(宽,高)(图)

context.drawImage(image, 10, 10);
var imageData = context.getImageData(10, 10, 201, 146);//取得对象(x,y,宽,高)

for (var i = 0; i < 201 * 146 * 4; i += 4) {
  imageData.data[i] = 255 - imageData.data[i];
  imageData.data[i + 1] = 255 - imageData.data[i + 1];
  imageData.data[i + 2] = 255 - imageData.data[i + 2];       
}

context.putImageData(imageData, 230, 10);//在画布上面画出来(宽,高)

变换

平移

context.translate(x, y);//平移距离

context.transform(1, 0, 0, 1, x, y);
旋转

context.rotate(angle);//旋转角度

context.transform(cos30, sin30, -sin30, cos30, 1, 1);

//以矩形中心旋转
    context.strokeRect(50, 50, 150, 100);
    var degToRad = Math.PI / 180;
    context.translate(125, 100);  //画布移到矩形中心
    context.rotate(45 * degToRad);//旋转
    context.translate(-125, -100);//移回去
    context.strokeRect(50, 50, 150, 100);

缩放:传入负数,翻转画布

context.scale(x， y)//向着原点收缩或放大

context.transform(0.5, 0, 0, 0.5, 1, 1);

填充

线性渐变

//(x0,y0,x1,y1)

var gradient = context.createLinearGradient(50, 0, 350, 0);
            //breakPoint

gradient.addColorStop(0, "#FF0000");
gradient.addColorStop(0.5, "#00FF00");
gradient.addColorStop(1, "#0000FF");

context.fillStyle = gradient;
context.fillRect(10, 10, 380, 180);//绘制矩形不一定要相同

径向渐变

context.createRadialGradient(x0， y0， r0， x1， y1， r1)
//这个方法接收六个参数，前三个参数代表第一个圆的圆心位置和半径，后三个参数代表第二个园的圆心位置和半径。

var gradient = context.createRadialGradient(200, 100, 10, 200, 100, 200);
    gradient.addColorStop(0, "#FF0000");
    gradient.addColorStop(0.5, "#00FF00");
    gradient.addColorStop(1, "#0000FF");
    context.fillStyle = gradient;
    context.fillRect(10, 10, 380, 180);

图像填充

context.createPattern(image， repetition)
//这个方法接收两个参数，第一个参数image代表用于填充的图像，第二个参数repetition代表填充的方式，有值“repeat”（重复平铺）、“repeat-x”（仅水平重复）、“repeat-y”（仅纵向重复）和“no-repeat”（不重复）。

image.onload = function () {      
  var pattern = context.createPattern(image, "repeat");     
  context.fillStyle = pattern;      
  context.fillRect(10, 10, 380, 180);
}

阴影效果

image.onload = function () {      
context.shadowColor = "red";  //阴影颜色    
context.shadowOffsetX = 5;    //偏移量
context.shadowOffsetY = 10;

context.shadowBlur = 10;      //模糊程度

context.fillStyle = "blue";
context.fillRect(10, 10, 180, 100);
context.drawImage(image, 200, 10);  
}

剪切
- clip()方法会把当前已确定的路径包围的区域当做为剪切区域，调用后只有剪切区域内的图形才会绘制出来。如果希望恢复原状，只需把剪切区域设置为画布大小的矩形即可。如下：
context.clip()

绘图状态

//save()方法可以让在修改属性之前保存下当前的属性值，在修改结束后想要回到原来的状态时，只需要调用restore()方法即可回到上次调用save()时的状态。堆栈实现
//清除路径的方法是调用beginPath()方法。
context.save();
  context.shadowColor = "red";
  context.shadowOffsetX = 5;
  context.shadowOffsetY = 10;
  context.shadowBlur = 10;
  context.fillStyle = "blue";
  context.fillRect(10, 10, 180, 100);

context.restore();
  context.fillRect(210, 10, 180, 100);