canvas方法

最新推荐文章于 2024-10-12 09:26:17 发布

Dj_Fairy

最新推荐文章于 2024-10-12 09:26:17 发布

阅读量470

点赞数 1

分类专栏： canvas

本文链接：https://blog.csdn.net/Dj_Fairy/article/details/83818628

版权

canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

参考网站

一、w3School

二、canvas的基本用法

1、var canvas=document.getElementById('canvas')//找到canvas元素

2、var context=canvas.getContext('2d')//创建contetx对象

3、canvas多种内置方法

context.beginPath()

context.closePath()

(1)绘制一条直线

        context.moveTo(0,0)       //从(0,0)开始坐标
        context.lineTo(100,100)  //(100,100)结束坐标
        context.lineWidth='10'     //线条宽度
        context.strokeStyle='blue'//线条颜色
        context.stroke()                //开始绘制

(2) 画圆

canvas(centerx,centery,radius,startingAngle,endingAngle,antclockwise=false)
canvas(x轴坐标，y轴坐标，角度，开始的角度，结束的角度，顺时针（默认false）/逆时针true)

(3)填充颜色

context.fillStyle='red'
context.fill()

(3)创建矩形

context.react(x,y,width,height)//绘制矩形
ctx.fillRect(0,0,300,150);//绘制被填充的矩形
ctx.fillStyle="red";//被填充矩形的颜色
ctx.clearRect(20,20,100,50);//在给定的矩形内清除指定的像素

(4)绘制五角星

   function drawStar(cxt,r,R,x,y,rot){
        cxt.beginPath()
        for(var i=0;i<5;i++){
            cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R+y)
            cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r+y)
        }
        cxt.closePath()
        cxt.stroke()
    }

(5)context.save()与context.restore()成对出现