swwht(canvas).demo

主要实现

canvas画布上绘制图像

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>死亡万花筒-永昼</title>
</head>
<body><canvas id="yz" width="1000" height="700" style="border: 1px solid; margin-left: 200px;"></canvas>                                           <!-- 创建画布 --><script type="text/javascript">window.onload=function(){                         //页面加载，执行该方法var title = "永昼";var can = document.getElementById('yz');        //找到 <canvas> 元素if(can.getContext){var context = can.getContext("2d");         //创建 context 对象context.scale(1,1);                         //缩放绘图context.rect(0,0,80, 80);                   //矩形context.fill();context.clearRect(30,30,20,20);context.fillRect(920,620,80,80);context.clearRect(950,650,20,20);context.fillStyle="red";context.fillRect(0,620,80,80);context.clearRect(30,650,20,20);context.fillRect(920,0,80,80);context.clearRect(950,30,20,20);context.beginPath();            //三角形context.lineWidth=2;context.moveTo(126,240);context.lineTo(80,320);context.lineTo(172,320);context.closePath();            //close将图像封闭context.stroke();context.beginPath();            //圆context.lineWidth=2;context.arc(126,294,27,0,2*Math.PI);// context.closePath();               //close后，没有360的弧会被直线关闭context.stroke();context.beginPath();            //直线context.moveTo(126,240);context.lineTo(126,320);context.closePath();context.stroke();//context.rotate(10*Math.PI/180)  //顺时针10度context.font = "bold 40px KaiTi";context.strokeStyle="black";context.strokeText(title,450,120); //无填充文本// context.shadowColor= "black";  //文字阴影// context.shadowBlur=1;// context.shadowOffsetX=1;// context.shadowOffsetY=1;context.font = "22px KaiTi";context.fillStyle="red";context.fillText("死亡万花筒",550,145);   //填充文本context.font = "25px KaiTi";context.fillStyle="black";context.fillText("眼中一瞬 透过引渡生死的门",330,180);context.fillText("长明灯火 烬燃天边孤月一轮",330,210);context.fillText("俯身 要敬鬼神",330,240);context.fillText("万千爱恨 荡然无存",330,270);context.fillText("此生一人 走过多少夏秋冬春",330,300);context.fillText("荒落的城 失落 过往冥冥幽魂",330,330);context.fillText("回眸 远方那人",330,360);context.fillText("笑语温存 重温美景良辰",330,390);}}</script>
</body>
</html>

转载于:https://www.cnblogs.com/xixicf/p/10588421.html

swwht(canvas).demo相关推荐

微信小游戏开发Canvas资源汇总
Demo: 微信小程序demo组件:股票分时图微信小程序小组件:仿直播点赞气泡效果,基于Canvas 优质demo推荐:二维码生成器:使用canvas与纯JS版二维码生成微信小程序学习用完整dem ...
使用 HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C "工作草案" - 意味着它仍然处于开发阶段 - 它包含丰富的元素和属性,它 ...
用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法发布时间:2020-08-29 11:24:23 来源:亿速云阅读:96 作者:小新这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
使用HTML5 canvas绘制一个矩形的方法发布时间:2020-08-29 11:23:12 来源:亿速云阅读:102 作者:小新这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一 ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
canvas中文显示乱码 html5_如何使用HTML5 canvas绘制文字
如果要使用HTML5 Canvas绘制文字,那么需要使用到画布上下文的fillText()方法.下面我们来看具体的内容. 我们先来看具体的示例 function draw() { var canvas ...
html5 canvas 显示文字,如何使用HTML5canvas绘制文字
如果要使用HTML5 Canvas绘制文字,那么需要使用到画布上下文的fillText()方法.下面我们来看具体的内容. 我们先来看具体的示例 function draw() { var canvas ...
html5+canvas+九宫格,javascript+canvas制作九宫格小程序
js核心代码 /* *canvasid:html canvas标签id *imageid:html img 标签id *gridcountX:x轴图片分割个数 *gridcountY:y轴图片分割个数 ...
Python tkinter相关Demo演示
Tkinter实现透明窗口最简单的方法 import tkinter as tkroot = tk.Tk() root.title('Tkinter Window Demo') root.geomet ...
canvas 涂鸦画板，支持笔写、手写、鼠标绘图
预览效果实现了 PC 端, 移动端的手写,笔写,鼠标绘图已知问题: 笔写需要移动端的触屏笔才能触发,基于pointerType判断,可能存在笔或系统被改过部分浏览器无法识别为笔,从而笔触发poin ...

swwht(canvas).demo

主要实现

swwht(canvas).demo相关推荐

最新文章

热门文章