chapter 15 使用canvas绘图

最新推荐文章于 2021-08-03 23:43:06 发布

郭晓小小

最新推荐文章于 2021-08-03 23:43:06 发布

阅读量392

点赞数

分类专栏： javascript学习文章标签： javascript canvas

本文链接：https://blog.csdn.net/u010057430/article/details/50748462

版权

javascript学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!doctype>
<html>
<head>
	<meta charset="UTF8">
    <title>chapter 15 使用canvas绘图</title>
</head>
<body>
    <canvas id="canvas1" height="800" width="800"></canvas>
</body>
<script type="text/javascript">
window.onload = function(){
    var canvas = document.getElementById("canvas1");
    if(canvas.getContext){
        var context = canvas.getContext("2d");
        // 填充和描边
        context.strokeStyle = "red";//设置描边颜色
        context.fillStyle = "green";//设置填充颜色

        // 阴影
        // 设置阴影
        context.shadowOffertX = 5;
        context.shadowOffertY = 5;
        context.shadowBlur = 4;
        context.shadowColor = "rgba(0,0,0,0,5)";

        // 绘制填充矩形
        context.fillRect(10,10,50,50);
        context.fillStyle = "rgba(0,0,255,0.5)";//设置填充颜色
        context.fillRect(30,30,50,50);

        // 绘制描边矩形
        context.strokeStyle = "red";
        context.lineCap = "round";
        context.strokeRect(60,60,30,30);

        // 绘制渐变
        var gradient = context.createLinearGradient(39,30,70,70);
        gradient.addColorStop(0,"white");
        gradient.addColorStop(1,"black");

        context.fillStyle = gradient;
        context.fillRect(30,30,50,50);

        // lineWidth控制宽度，lineCap控制平头，圆头，和方头 
        context.clearRect(40,40,10,10);// 清除一小块区域

        // 绘制路线,时钟
        context.beginPath();
        context.arc(200,200,99,0,2*Math.PI,false);
        context.moveTo(294,200);
        context.arc(200,200,94,0,2*Math.PI,false);
        context.moveTo(200,200);
        context.lineTo(200,125);
        context.moveTo(200,200);
        context.lineTo(135,200)
        context.stroke();

        // 判断点是否在路径上
        if(context.isPointInPath(100,100)){
            console.log("100,100 in Path");
        }
        else{
             console.log("100,100 not in Path");
        }

        // 绘制文本
        context.font = "bold 14px";
        context.textAlign = "center";// start起点对齐，end终点对其,x轴对齐方式
        context.textBaseline = "middle";// y轴对齐方式
        context.fillText("12",200,120);

        // 变换，圆点变换rotate(),缩放scale(),translate()等
        // 上下文状态可以用context.save()和context.restore()进行入栈和出栈

        // 绘制图像,drawImage()
        // 绘制图像的模式，repeat,repeat-x.repeat-y,no-repeat
        // 使用图像数据,可以用于创建灰阶图像getImageData()和putImageData()
        // 合成 
        context.globalAlpha = 0.5;// 设置全局透明度
        // context.globalCompositionOperation 设置后绘制图像与原本图像的结合方式

        // 使用webGL进行3d编程
    }
}
</script>
</html>

郭晓小小

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
chapter 15 使用canvas绘图

chapter 15 使用canvas绘图 window.onload = function(){ var canvas = document.getElementById("canvas1"); if(canvas.getContext){ var context = canvas.getContext("2d"); // 填充和
复制链接

扫一扫